:root{
    --cream:#FAF7F2; --charcoal:#3A3C35; --orange:#FF930A; --mint:#F1F8E2; /* light brand color, from the light logo */
    --charcoal-soft:#5B5D54; --line:#E4DFD6; --white:#FFFFFF; --black:#000000;
    --card:#FFFFFF;
    box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-padding-top:env(safe-area-inset-top,0px);}
  /* Overscroll and the phone's bottom safe area show the footer color below the page, and cream only at the very top, so no light bar appears under the footer */
  html{background:linear-gradient(#faf7f2,#faf7f2) top/100% 100vh no-repeat, #2B2D27 !important;}
  html,body{background:var(--cream); color:var(--charcoal);}

  body{font-family:'Source Sans 3',sans-serif; font-size:16px; line-height:1.6;}
  h1,h2,h3{font-family:'Source Sans 3',sans-serif; font-weight:900; letter-spacing:-0.01em; color:var(--charcoal);}
  h2{font-size:clamp(1.7rem,3vw,2.3rem);}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  .page{display:none;} .page.active{display:block;}

  header{position:sticky; top:0; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(250,247,242,0.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); transition:transform .25s ease, box-shadow .3s ease;}
  header.scrolled{box-shadow:0 6px 24px rgba(58,60,53,0.12);}
  header.hide-header{transform:translateY(-100%);}
  nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:18px 28px; max-width:1180px; margin:0 auto;}
  nav .logo{justify-self:start;}
  nav .navlinks{justify-self:center;}
  nav .shop-btn{justify-self:end;}
  .logo{font-weight:900; font-size:1.2rem; background:none; border:none; cursor:pointer; color:var(--charcoal); letter-spacing:-0.02em; padding:0; display:flex; align-items:center; transition:transform .12s ease;}
  .logo.tap-active{transform:scale(0.92);}
  @media(hover:hover){ .logo:hover{transform:scale(1.06);} }
  .navlinks{display:flex; gap:26px; font-size:0.92rem;}
  .navlinks a{background:none; border:none; font-family:inherit; font-size:inherit; color:var(--charcoal-soft); cursor:pointer; padding:4px 0; border-bottom:2px solid transparent;}
  .navlinks a.active, .navlinks a:hover{color:var(--charcoal); border-bottom-color:var(--orange);}
  .shop-btn{border:1.5px solid var(--charcoal); background:none; padding:9px 18px; font-size:0.86rem; font-weight:700; cursor:pointer; color:var(--charcoal); font-family:inherit;}
  @media(hover:hover){ .shop-btn:hover{background:var(--charcoal); color:var(--cream);} }
  .logo-wide{display:block;}
  .logo-stack{display:none;}
  .home-btn{display:none; width:46px; height:46px; padding:0; border-radius:50%; border:none; background:var(--charcoal); color:var(--cream); cursor:pointer; align-items:center; justify-content:center;}
  .home-btn:active{transform:scale(0.94);}
  .home-btn{transition:opacity .25s ease, visibility 0s linear 0s, transform .12s ease;}
  .home-btn.on-home{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility 0s linear .25s;}
  .hamburger{display:none; background:none; border:none; cursor:pointer; padding:6px; flex-direction:column; gap:5px;}
  .hamburger span{display:block; width:22px; height:2px; background:var(--charcoal); transition:transform .25s ease, opacity .2s ease;}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-nav{display:none; flex-direction:column; border-top:1px solid var(--line); background:var(--white); padding:10px 28px 18px; box-shadow:0 12px 24px rgba(0,0,0,0.12); position:absolute; top:100%; left:0; right:0; z-index:2; max-height:calc(100vh - 100%); overflow-y:auto;}
  .mobile-nav.open{display:flex;}
  .mobile-nav-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:40;}
  .mobile-nav-backdrop.open{display:block;}
  .mobile-nav a{background:none; border:none; text-align:left; padding:14px 12px; margin:0 -12px; font-family:inherit; font-size:1.3rem; font-weight:700; color:var(--charcoal); border-bottom:1px solid var(--line); cursor:pointer; border-radius:6px; transition:background .12s ease, box-shadow .12s ease, transform .15s ease, color .15s ease;}
  @media(hover:hover){ .mobile-nav a:hover{transform:translateX(6px); color:var(--orange);} }
  .mobile-nav a.touch-glow{background:rgba(255,147,10,0.16); box-shadow:0 0 14px rgba(255,147,10,0.45); border-bottom-color:transparent;}
  .mobile-nav a.active{color:var(--orange); font-weight:700;}
  .back-arrow{display:none; background:none; border:none; cursor:pointer; padding:6px; align-items:center; justify-content:center;}
  #back-to-top{position:fixed; bottom:24px; bottom:max(24px,env(safe-area-inset-bottom,0px)); right:24px; width:46px; height:46px; border-radius:50%; background:var(--charcoal); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; border:2px solid rgba(250,247,242,0.9); box-shadow:0 4px 14px rgba(0,0,0,0.2); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30;}
  #back-to-top.show{opacity:1; pointer-events:auto;}
  @media(max-width:860px){
    .navlinks{display:none;}
    .hamburger{display:flex;}
    .shop-btn{display:none;}
    nav{display:grid; grid-template-columns:1fr auto 1fr;}
    nav .logo{grid-column:2; grid-row:1; justify-self:center;}
    .hamburger{grid-column:1; grid-row:1; justify-self:start; margin-left:-6px;}
    .back-arrow{grid-column:3; grid-row:1; justify-self:end; margin-right:-6px;}
    .back-arrow.show{display:none;}
    nav{padding:12px 20px;}
    nav .logo .logo-wide{display:none;}
    nav .logo .logo-stack{display:block; height:44px; width:auto;}
    .home-btn{display:flex; grid-column:3; grid-row:1; justify-self:end;}
  }
  /* Header as a thin floating island, like the shop: an outlined, shadowed bar that sits inside the page edges.
     It still slides away while scrolling down and comes back on the way up. The phone menu opens as a matching panel under it. */
  header{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; padding:10px 16px 0; pointer-events:none;}
  header > *{pointer-events:auto;}
  header.scrolled{box-shadow:none;}
  header.hide-header{transform:translateY(calc(-100% - 24px));}
  header nav{background:rgba(250,247,242,0.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 22px rgba(58,60,53,0.10); padding:10px 22px; max-width:1240px; transition:box-shadow .3s ease;}
  header.scrolled nav{box-shadow:0 8px 26px rgba(58,60,53,0.16);}
  header .mobile-nav{top:calc(100% + 8px); left:16px; right:16px; border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 30px rgba(58,60,53,0.16); max-height:calc(100dvh - 100% - 24px);}
  .mnav-social{display:flex; justify-content:center; gap:22px; padding:18px 0 4px; margin-top:6px;}
  .mnav-social a{display:flex; padding:6px; margin:0; border:0; font-size:0;}
  .mnav-social svg{width:22px; height:22px; fill:var(--charcoal);}
  @media(max-width:860px){
    header{padding:8px 12px 0;}
    header nav{padding:6px 12px; border-radius:12px;}
    header nav .logo .logo-stack{display:none;}
    header nav .logo .logo-wide{display:block; height:20px !important;}
    header .home-btn{width:40px; height:40px; background:none; color:var(--charcoal); border-radius:10px; margin-right:-4px;}
    header .home-btn svg{width:23px; height:23px; stroke-width:1.7;} /* thin line icon, same weight and size as the menu lines and the bag */
    header .home-btn:active{background:rgba(58,60,53,0.08);}
    header .mobile-nav{left:12px; right:12px; padding:6px 22px 14px;}
  }
  /* Island matched to the shop header (shop.skyvismedia.com): white, thin gray outline, round ends, a big one line logo,
     thin menu lines and a bag on the right. A shadow only appears once it floats over the page. */
  header nav{background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:#D7D7D6; border-radius:22px; box-shadow:none;}
  header.scrolled nav{box-shadow:0 6px 20px rgba(58,60,53,0.10);}
  header .mobile-nav{border-color:#D7D7D6; border-radius:22px;}
  .bag-btn{display:none; align-items:center; justify-content:center; width:40px; height:40px; color:var(--charcoal); text-decoration:none;}
  .bag-btn svg{transform:translateY(-1px);} /* the bag's weight sits low, so it is lifted to look centered */
  @media(max-width:860px){
    header{padding:10px 10px 10px;} /* same gap under the island as desktop */
    header nav{padding:12px 14px; min-height:65px; box-sizing:border-box;}
    header nav .logo .logo-wide{height:28px !important;}
    .hamburger span{width:20px; height:1.75px;}
    .hamburger.open span:nth-child(1){transform:translateY(6.75px) rotate(45deg);}
    .hamburger.open span:nth-child(3){transform:translateY(-6.75px) rotate(-45deg);}
    header .home-btn.on-home ~ .bag-btn{display:flex; grid-column:3; grid-row:1; justify-self:end; margin-right:-4px;}
    header .mobile-nav{left:10px; right:10px;}
  }
  @media(max-width:370px){ header nav .logo .logo-wide{height:22px !important;} header nav{padding:12px 10px;} }
  .mobile-shop{margin-top:10px; border:1.5px solid var(--orange); color:var(--charcoal); background:var(--orange); text-align:center; padding:12px 0; font-weight:700;}

  .section{padding:100px 28px;}
  .section.tight{padding:64px 28px;}
  .section-head{max-width:620px; margin-bottom:48px;}
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.visible{opacity:1; transform:translateY(0);}
  @media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }
  .wcard.reveal{opacity:1; background:var(--white); transition:transform .11s ease-out;}

  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);}
  .section-head p{color:var(--charcoal-soft); margin-top:10px; font-size:1.02rem;}

  /* HERO */
  .hero{padding:110px 28px 70px; max-width:800px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center;}
  .hero h1{font-size:clamp(2.6rem,5.2vw,4rem); line-height:1.06; max-width:16ch;}
  .hero-side p{color:var(--charcoal-soft); font-size:1.08rem; max-width:40ch; margin:18px auto 0;}
  .cta{display:inline-block; background:var(--orange); color:var(--charcoal); padding:14px 28px; font-weight:700; font-size:0.95rem; border:none; cursor:pointer; font-family:inherit; margin-top:20px;}
  @media(hover:hover){ .cta:hover{background:var(--charcoal); color:var(--cream);} }
  .cta-outline{display:inline-block; border:1.5px solid var(--charcoal); background:none; color:var(--charcoal); padding:12px 24px; font-weight:700; font-size:0.9rem; cursor:pointer; font-family:inherit;}
  @media(hover:hover){ .cta-outline:hover{background:var(--charcoal); color:var(--cream);} }


  /* TRUSTED / STATS / PRESS strips */
  .strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:36px 28px;}
  .strip-inner{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; color:var(--charcoal-soft); font-size:0.9rem;}
  .strip-row{display:flex; gap:40px; flex-wrap:wrap; align-items:center; justify-content:center;}
  @media(max-width:600px){ .strip-row{gap:20px; row-gap:14px;} }
  .trusted-row{flex-wrap:nowrap; overflow:visible; max-width:100%;}
  @media(max-width:900px){
    .trusted-row{overflow-x:auto; overflow-y:hidden; justify-content:flex-start; padding:0 4px 4px; scrollbar-width:none;}
    .trusted-row::-webkit-scrollbar{display:none;}
  }
  .strip-inner .stat{text-align:center; width:150px;}
  .strip-inner .stat strong{display:block; font-family:'Source Sans 3'; font-weight:900; font-size:1.3rem; color:var(--charcoal);}

  /* PROBLEM */
  .problem{max-width:760px; margin:0 auto; text-align:center;}
  .problem p{font-size:1.15rem; color:var(--charcoal-soft);}

  /* PROBLEM/SOLUTION CARDS */
  .psgrid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .pscard{background:var(--card); border:1px solid var(--line); padding:0; display:flex; flex-direction:column; overflow:hidden; transition:transform .09s ease-out, box-shadow .09s ease-out;}
  @media(hover:hover){ .pscard:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.12);} }
  .pscard .pbody{padding:26px 26px 20px; flex:1;}
  .pscard h4{font-size:1.05rem; margin-bottom:10px;}
  .pscard p{font-size:0.92rem; color:var(--charcoal-soft); margin-bottom:0;}
  .pscard .sol{font-size:0.92rem; color:var(--cream); background:var(--charcoal); padding:16px 26px; margin:0;}
  .pscard .sol b{color:var(--orange);}
  .section.merged{padding-bottom:70px;}
  @media(min-width:821px){ .pscard .sol{min-height:106px; display:flex; align-items:center;} }
  .ba-wrap{max-width:900px; margin:56px auto 0;}
  .ba{position:relative; aspect-ratio:3/2; overflow:hidden; border:1px solid var(--line); background:#ddd; touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; box-shadow:0 10px 30px rgba(0,0,0,0.10);}
  .ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none;}
  .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
  .ba-line{position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,0.35); pointer-events:none;}
  .ba-handle{position:absolute; top:50%; left:var(--pos); width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:#fff; color:var(--charcoal); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,0.35); outline:none;}
  .ba-handle:focus-visible{box-shadow:0 0 0 3px var(--orange), 0 2px 12px rgba(0,0,0,0.35);}
  .ba-tag{position:absolute; top:14px; padding:5px 12px; background:rgba(43,45,39,0.78); color:#fff; font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; pointer-events:none;}
  .ba-tag-l{left:14px;} .ba-tag-r{right:14px;}
  .cproof{max-width:560px; margin:52px auto 0; text-align:center;}
  .cp-top{display:inline-flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; color:var(--charcoal);}
  .cp-stars{display:flex; gap:6px;}
  .cp-stars svg{display:block; fill:transparent; stroke:#CFC8BB; stroke-width:1.4; stroke-linejoin:round; transition:fill .25s ease, stroke .25s ease, transform .35s cubic-bezier(.3,1.6,.5,1);}
  .cp-stars svg.f{fill:var(--orange); stroke:var(--orange); transform:scale(1.12);}
  .cp-stars svg.f.s{transform:scale(1);}
  .cp-line{font-size:1rem; color:var(--charcoal-soft);}
  .cp-line strong{color:var(--charcoal); font-weight:900; font-size:1.25rem; font-variant-numeric:tabular-nums;}
  .cp-sep{margin:0 8px;}
  @media(hover:hover){ a.cp-top:hover .cp-line{color:var(--orange);} }
  .cp-show{display:grid; margin-top:22px; background:var(--white); border:1px solid var(--line); padding:30px 28px 26px; opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease;}
  .cp-show.in{opacity:1; transform:none;}
  .cp-slide{grid-area:1/1; margin:0; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s; display:flex; flex-direction:column; justify-content:center; gap:14px;}
  .cp-slide.on{opacity:1; visibility:visible; transition:opacity .35s ease;}
  .cp-slide blockquote{margin:0; font-size:1.02rem; line-height:1.65; color:var(--charcoal-soft);}
  .cp-slide figcaption{font-weight:700; color:var(--charcoal); font-size:0.9rem;}
  .cp-slide figcaption span{display:block; font-weight:500; font-size:0.78rem; color:var(--charcoal-soft); margin-top:2px; letter-spacing:.02em;}
  .cp-dots{display:flex; justify-content:center; gap:4px; margin-top:6px;}
  .cp-dot{width:30px; height:30px; background:none; border:0; padding:0; cursor:pointer; position:relative;}
  .cp-dot::after{content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:#CFC8BB; transition:background .2s ease, transform .2s ease;}
  .cp-dot.on::after{background:var(--charcoal); transform:scale(1.15);}
  .cp-dot:focus-visible{outline:2px solid var(--orange); outline-offset:-4px;}
  .cproof.rm .cp-show{opacity:1; transform:none; transition:none; display:block;}
  .cproof.rm .cp-slide{opacity:1; visibility:visible; transition:none; padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--line);}
  .cproof.rm .cp-slide:last-child{border:0; margin:0; padding:0;}
  .cproof.rm .cp-dots{display:none;}
  .cproof.rm .cp-stars svg{fill:var(--orange); stroke:var(--orange); transition:none;}
  @media(max-width:520px){ .cp-show{padding:24px 20px 20px;} .cp-slide blockquote{font-size:0.97rem;} }
  .ba-switch{display:flex; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap;}
  .ba-switch[hidden]{display:none;}
  .ba-switch button{font:inherit; font-size:0.82rem; font-weight:700; letter-spacing:0.04em; padding:7px 16px; border:1px solid var(--line); background:transparent; color:var(--charcoal-soft); cursor:pointer; transition:color .2s ease, border-color .2s ease, background .2s ease;}
  .ba-switch button[aria-selected="true"]{background:var(--charcoal); border-color:var(--charcoal); color:#fff;}
  @media(hover:hover){ .ba-switch button[aria-selected="false"]:hover{border-color:var(--orange); color:var(--orange);} }
  .ba-switch button:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
  .ba-cap{text-align:center; margin-top:14px; font-size:0.9rem; color:var(--charcoal-soft);}
  @media(max-width:520px){ .ba{aspect-ratio:4/3;} .ba-handle{width:42px; height:42px; margin:-21px 0 0 -21px;} .ba-tag{top:10px; padding:4px 9px; font-size:0.7rem;} .ba-tag-l{left:10px;} .ba-tag-r{right:10px;} .pscard .pbody{padding:22px 20px 16px;} .pscard .sol{padding:14px 20px;} }
  @media(max-width:820px){ .psgrid{grid-template-columns:1fr;} }

  /* TESTIMONIALS */
  .testi{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .tcard{background:var(--card); border:1px solid var(--line); padding:24px; font-size:0.95rem; color:var(--charcoal-soft); transition:transform .09s ease-out, box-shadow .09s ease-out;}
  @media(hover:hover){ .tcard:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.12);} }
  .tcard .who{margin-top:12px; font-weight:700; color:var(--charcoal); font-size:0.88rem;}
  @media(max-width:820px){ .testi{grid-template-columns:1fr;} }
  .rbadge{display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:-12px auto 28px; font-size:0.92rem; color:var(--charcoal-soft);}
  .rbadge b{color:var(--charcoal); font-size:1.05rem;}
  .rbadge .rstars{color:var(--orange); letter-spacing:3px;}
  .testi.rv3{grid-template-columns:repeat(3,1fr);}
  .rcard{flex-direction:column; gap:12px;}
  .rcard .rstars{color:var(--orange); letter-spacing:3px; font-size:1.05rem; line-height:1;}
  .rcard .rq{line-height:1.6;}
  .rcard .who{margin-top:auto; padding-top:4px;}
  .rcard a.rmeta{text-decoration:none;}
  @media(hover:hover){ .rcard a.rmeta:hover, a.rbadge:hover span:last-child{color:var(--orange); text-decoration:underline;} }
  a.rbadge{text-decoration:none;}
  /* review badge: stars fill one by one and the numbers count up, like the contact page */
  .rbadge .rb-stars{display:inline-flex; gap:3px; letter-spacing:0;}
  .rb-stars svg{display:block; width:18px; height:18px; fill:var(--orange); stroke:var(--orange); stroke-width:1.4; stroke-linejoin:round; transition:fill .25s ease, stroke .25s ease, transform .35s cubic-bezier(.3,1.6,.5,1);}
  .rbadge.rb-pre .rb-stars svg{fill:transparent; stroke:#CFC8BB;}
  .rbadge.rb-pre .rb-stars svg.f{fill:var(--orange); stroke:var(--orange); transform:scale(1.12);}
  .rbadge.rb-pre .rb-stars svg.f.s{transform:scale(1);}
  .rb-num, .rb-cnt{font-variant-numeric:tabular-nums;} .rb-cnt{display:inline-block; text-align:right;}
  #testimonials{scroll-margin-top:90px;}
  .rcard .rmeta{display:block; font-weight:500; font-size:0.78rem; color:var(--charcoal-soft); margin-top:2px; letter-spacing:.02em;}
  @media(max-width:1000px){ .testi.rv3{grid-template-columns:1fr;} }
  @media(min-width:1001px){ #testimonials .testi.rv3{grid-template-columns:repeat(6,1fr);} #testimonials .testi.rv3 > .tcard{grid-column:span 2;} #testimonials .testi.rv3 > .tcard:last-child:nth-child(3n+1){grid-column:3 / span 2;} }


  /* PROCESS */
  .process-row{max-width:760px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:4px;}
  .pstep{display:flex; flex-direction:column; align-items:center; gap:10px; width:130px;}
  .picon{width:68px; height:68px; border-radius:50%; background:var(--cream); border:1.5px solid var(--charcoal); display:flex; align-items:center; justify-content:center;}
  .pstep span{font-weight:700; font-size:0.92rem;}
  .parrow{color:var(--charcoal-soft); font-size:1.3rem;}
  @media(max-width:480px){
    .process-row{gap:2px;}
    .pstep{width:88px; gap:6px;}
    .picon{width:46px; height:46px;}
    .pstep span{font-size:0.78rem;}
    .parrow{font-size:1rem;}
  }

  /* WORK GRID */
  .tabs{max-width:1180px; margin:0 auto 34px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px;}
  .tabs button{border:1.5px solid var(--charcoal); background:none; color:var(--charcoal); padding:0 8px; height:56px; font-size:0.98rem; cursor:pointer; font-family:inherit; transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;}
  @media(hover:hover){ .tabs button:not(.active):hover{transform:translateY(-4px); background:var(--charcoal); color:var(--cream); box-shadow:0 10px 20px rgba(0,0,0,0.12);} }
  .tabs button.active{background:var(--charcoal); color:var(--cream); cursor:default;}
  .wgrid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; background:var(--line);}
  .wcard{background:var(--white); cursor:pointer; transition:transform .09s ease-out, box-shadow .09s ease-out; position:relative; z-index:1;}
  @media(hover:hover){ .wcard:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2;} }
  .wcard .img{aspect-ratio:4/3; background:linear-gradient(150deg,#EFEBE3,#E4DFD6); display:flex; align-items:flex-end; padding:16px; color:var(--charcoal-soft); font-size:0.78rem; font-style:italic;}
  .wcard .body{padding:14px 16px 18px;}
  .wcard h4{font-size:1rem; font-weight:700;}
  .wcard p{font-size:0.82rem; color:var(--charcoal-soft); margin-top:2px;}
  @media(max-width:820px){ .wgrid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:520px){ .wgrid{grid-template-columns:1fr;} }
  @media(max-width:820px){ #home-teaser-grid{grid-template-columns:1fr;} }

  /* SERVICES GRID */
  .sgrid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .scard{cursor:pointer; padding:24px 20px; border-radius:10px; background:var(--card); border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,0.05); transition:transform .09s ease-out, box-shadow .09s ease-out, background .15s ease;}
  @media(hover:hover){ .scard:hover{transform:translateY(-8px) scale(1.03); box-shadow:0 16px 32px rgba(0,0,0,0.14);} }
  .scard:active, .scard.tap-active{transform:scale(0.96); background:var(--white); box-shadow:0 8px 20px rgba(0,0,0,0.12);}
  .scard .icon{width:52px; height:52px; margin-bottom:14px;}
  .scard h4{font-size:1.05rem; margin-bottom:6px;}
  .scard p{font-size:0.85rem; color:var(--charcoal-soft); line-height:1.5;}
  @media(max-width:820px){ .sgrid{grid-template-columns:repeat(2,1fr);} }

  /* FAQ accordion */
  .faq{max-width:760px; margin:0 auto; display:grid; gap:10px;}
  .faq-item{border:1px solid var(--line); background:var(--card); transition:transform .09s ease-out, box-shadow .09s ease-out;}
  @media(hover:hover){ .faq-item:hover{transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.08);} }
  .faq-q{padding:16px 20px; font-weight:700; font-size:0.98rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
  .faq-a{max-height:0; overflow:hidden; padding:0 20px; font-size:0.92rem; color:var(--charcoal-soft); transition:max-height .2s ease, padding .2s ease;}
  .faq-item.open .faq-a{max-height:360px; padding:0 20px 18px;}
  .faq-q .plus{transition:transform .15s ease; font-weight:400; color:var(--orange);}
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}

  /* ABOUT */
  .row2{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
  .ph-note{aspect-ratio:4/3; background:#EFEBE3; border:1px dashed var(--charcoal-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; color:var(--charcoal-soft); font-size:0.85rem; font-style:italic;}
  .ph-note svg{flex-shrink:0;}
  .wcard .img{flex-direction:column; gap:6px;}
  .logo-box{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:0.8rem; color:var(--charcoal-soft);}
  .hero-reel{aspect-ratio:21/9; background:#EFEBE3; border:1px dashed var(--charcoal-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; margin-top:36px; color:var(--charcoal-soft); font-size:0.9rem; font-style:italic;}
  .avatar-ph{width:34px; height:34px; border-radius:50%; background:#EFEBE3; border:1px dashed var(--charcoal-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .tcard{display:flex; gap:12px; align-items:flex-start;}
  @media(max-width:820px){ .row2{grid-template-columns:1fr;} }
  .content-note{border:1px dashed var(--charcoal-soft); background:#EFEBE3; padding:16px 18px; font-size:0.85rem; font-style:italic; color:var(--charcoal-soft);}
  .content-note b{font-style:normal; color:var(--charcoal);}
  .cs{display:flex; flex-direction:column; gap:40px; margin-top:30px;}
  .cs h4{font-size:1.1rem; margin-bottom:8px;}
  .cs p{color:var(--charcoal-soft);}
  .cs-meta{font-size:0.9rem; font-style:italic;}
  .cs-pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px;}
  .cs-three, .cs-bts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
  .cs-three .ph-note, .cs-bts .ph-note{padding:10px; font-size:0.78rem;}
  .cs-collage{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,190px); gap:16px;}
  .cs-collage .ph-note{aspect-ratio:auto; height:100%;}
  .cs-collage .tall{grid-row:span 2;}
  .cs-quote{border-left:3px solid var(--orange); padding:4px 0 4px 18px; margin-top:16px; font-style:italic; color:var(--charcoal-soft);}
  .gallery-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:10px 0 24px;}
  @media(max-width:600px){
    .cs-collage{grid-template-columns:1fr; grid-template-rows:none;}
    .cs-collage .ph-note{aspect-ratio:3/2; height:auto;}
    .cs-collage .tall{grid-row:auto; aspect-ratio:4/5;}
    .gallery-strip{grid-template-columns:repeat(2,1fr);}
  }

  /* CONTACT FORM */
  .field{width:100%; background:var(--white); border:1px solid var(--line); padding:14px 16px; font-family:inherit; font-size:0.95rem; color:var(--charcoal);}
  textarea.field{resize:vertical; min-height:90px; max-width:100%; display:block;}
  .wgrid > *, .sgrid > *{min-width:0;}
  @media(max-width:480px){ .wgrid > .ph-note{padding:8px; font-size:0.72rem;} }
  @media(max-width:360px){ .sgrid{grid-template-columns:1fr;} }
  .field.invalid, .acc-select.invalid{border-color:#B3261E;}
  .phonefield{display:flex; gap:10px; align-items:stretch;}
  .phonefield input.field{flex:1; min-width:0;}
  .ccwrap{position:relative; flex:0 0 104px; display:flex; align-items:center; justify-content:center; gap:6px; background:var(--white); border:1px solid var(--line); font-size:0.95rem; color:var(--charcoal);}
  .ccwrap select{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:16px;}
  .ccwrap:focus-within{outline:2px solid var(--orange); outline-offset:1px;}
  .ccarrow{font-size:0.7rem; color:var(--charcoal-soft);}
  .phonefield.invalid .ccwrap, .phonefield.invalid input.field{border-color:#B3261E;}
  .namefield{display:flex; gap:10px;}
  .namefield input.field{flex:1; min-width:0;}
  .datefield{display:flex; flex-direction:column; gap:8px;}
  .datehint{font-size:0.82rem; color:var(--charcoal-soft); margin-top:-4px;}
  .datefield > label:first-child{font-size:0.95rem; color:var(--charcoal-soft);}
  .datefield input[type=date]{min-height:50px; appearance:none; -webkit-appearance:none;}
  .datefield input[type=date]:disabled{opacity:.45;}
  .datenot{display:flex; align-items:center; gap:10px; font-size:0.88rem; color:var(--charcoal-soft); cursor:pointer;}
  .datenot input{width:18px; height:18px; accent-color:var(--orange);}
  .form-msg{display:none; color:#B3261E; font-size:0.88rem; margin:4px 0 12px;}
  .hero{max-width:1100px;}
  .hero h1{max-width:30ch;}
  .section-head[style*="max-width:640px"]{max-width:900px !important;}
  .section-head[style*="text-align:center"] p{max-width:62ch; margin-left:auto; margin-right:auto;}
  .wgrid{background:transparent; gap:14px;}
  .wcard{border:1px solid var(--line); overflow:hidden;}
  .loc-wrap{max-width:1180px;}
  .band{padding:56px 28px;}
  .band-inner{max-width:1180px; margin:0 auto; text-align:center;}
  .band-eyebrow{font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--charcoal-soft); margin-bottom:26px;}
  .band-dark{background:#2B2D27; color:var(--cream);}
  .band-dark .band-eyebrow{color:var(--orange);}
  .band-white{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .strip .band-eyebrow{margin-bottom:0;}
  .stats3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:900px; margin:0 auto;}
  .stats3 .stat{width:auto; padding:6px 12px; text-align:center;}
  .stats3 .stat + .stat{border-left:1px solid rgba(250,247,242,0.16);}
  .stats3 strong{display:block; font-family:'Source Sans 3',sans-serif; font-weight:900; font-size:clamp(2.1rem,5.2vw,3.6rem); line-height:1; color:var(--cream); white-space:nowrap;}
  .stats3 strong i{font-style:normal; color:var(--orange);}
  .stats3 b{display:block; margin-top:12px; font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream);}
  .stats3 .stat > span{display:block; margin-top:4px; font-size:0.92rem; color:rgba(250,247,242,0.62);}
  .press-row{display:flex; justify-content:center; align-items:center; gap:72px; max-width:860px; margin:0 auto;}
  .logo-box.press-name{font-weight:900; letter-spacing:0.1em; text-transform:uppercase; font-size:1.05rem; color:var(--charcoal-soft); white-space:nowrap;}
  .logo-box.press-name{text-decoration:none; transition:opacity .7s ease, transform .25s ease, color .2s ease;}
  @media(hover:hover){ .logo-box.press-name:hover{color:var(--charcoal); transform:translateY(-3px);} }
  html .logo-box.press-name.hold{color:var(--charcoal); transform:translateY(-3px);}
  .logo-box.press-name.press-static{cursor:default;}
  @media(hover:hover){ .logo-box.press-name.press-static:hover{transform:none; color:var(--charcoal-soft);} }
  .trusted-row .logo-box{font-weight:700; font-size:0.98rem; color:var(--charcoal-soft); white-space:nowrap;}
  .process-row{max-width:760px; margin:0 auto; display:flex; align-items:flex-start; justify-content:center; gap:0;}
  .pstep{display:flex; flex-direction:column; align-items:center; gap:14px; width:140px;}
  .picon{position:relative; width:84px; height:84px; border:2px solid var(--charcoal); border-radius:50%; background:var(--cream); color:var(--charcoal); display:flex; align-items:center; justify-content:center;}
  .picon svg{width:34px; height:34px;}
  .pnum{position:absolute; top:-4px; right:-4px; width:24px; height:24px; border-radius:50%; background:var(--orange); color:var(--charcoal); font-style:normal; font-weight:900; font-size:0.78rem; display:flex; align-items:center; justify-content:center;}
  .parrow{height:84px; display:flex; align-items:center; padding:0 6px; font-size:0;}
  .process-row{max-width:820px;}
  .pstep{width:170px; gap:16px; transition:opacity .7s ease, transform .11s ease-out;}
  .pstep span{font-size:1rem;}
  .picon{width:112px; height:112px; box-shadow:0 10px 24px rgba(58,60,53,0.08); animation:pfloat 3.8s ease-in-out infinite; transition:box-shadow .3s ease, border-color .3s ease;}
  .picon svg{width:46px; height:46px;}
  .pnum{width:28px; height:28px; font-size:0.9rem; top:-2px; right:-2px;}
  .parrow{height:112px; padding:0 4px;}
  .parrow svg{width:26px; height:26px;}
  .process-row > .pstep:nth-child(3) .picon{animation-delay:-1.3s;}
  .process-row > .pstep:nth-child(5) .picon{animation-delay:-2.6s;}
  @keyframes pfloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
  @media(hover:hover){ .pstep:hover{transform:translateY(-6px);} .pstep:hover .picon{border-color:var(--orange); box-shadow:0 16px 30px rgba(58,60,53,0.16);} }
  html .pstep.hold{transform:translateY(-6px);}
  html .pstep.hold .picon{border-color:var(--orange); box-shadow:0 16px 30px rgba(58,60,53,0.16);}
  @media(prefers-reduced-motion:reduce){ .picon{animation:none;} }
  .stats-note{margin-top:30px; font-size:0.8rem; color:rgba(250,247,242,0.55);}
  .stats3 .cnt{display:inline-block; text-align:right; font-variant-numeric:tabular-nums; font:inherit; color:inherit; margin:0; letter-spacing:inherit;}
  @media(max-width:900px){
    .trusted-row{-webkit-mask-image:linear-gradient(to right,#000 86%,transparent); mask-image:linear-gradient(to right,#000 86%,transparent);}
  }
  @media(max-width:600px){
    .band{padding:44px 24px;}
    .stats3 .stat{padding:4px 6px;}
    .stats3 b{font-size:0.7rem; letter-spacing:0.1em; margin-top:10px;}
    .stats3 .stat > span{font-size:0.78rem;}
    .press-row{gap:8px; justify-content:space-between;}
    .logo-box.press-name{font-size:0.72rem; letter-spacing:0.05em;}
    .picon{width:76px; height:76px;}
    .picon svg{width:34px; height:34px;}
    .pnum{width:22px; height:22px; font-size:0.74rem; top:-3px; right:-3px;}
    .pstep{width:96px; gap:12px;}
    .pstep span{font-size:0.86rem;}
    .parrow{height:76px; padding:0 2px;}
    .parrow svg{width:18px; height:18px;}
    .stats-note{margin-top:24px; font-size:0.74rem;}
  }
  @media(max-width:360px){
    .press-row{gap:6px;}
    .logo-box.press-name{font-size:0.62rem; letter-spacing:0.02em;}
    .picon{width:60px; height:60px;}
    .picon svg{width:26px; height:26px;}
    .pstep{width:80px;}
    .pstep span{font-size:0.78rem;}
    .parrow{height:60px; padding:0;}
    .parrow svg{width:14px; height:14px;}
    .stats3 b{letter-spacing:0.06em;}
  }
  html .foot-links span.foot-review{display:inline-flex; width:auto; padding:0; border:1.5px solid var(--orange); transition:background .15s ease, color .15s ease, transform .15s ease;}
  html .foot-links span.foot-review > a{display:flex; justify-content:center; padding:14px 20px; margin:0;}
  @media(hover:hover){ html footer .foot-links span.foot-review:hover{background:var(--orange); color:var(--footer); transform:none;} }
  html footer .foot-links span.foot-review.hold, html footer .foot-links span.foot-review.tap-active{background:var(--orange); color:var(--footer); transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.3);}
  .hero-side p{max-width:76ch;}
  .loc-text p{text-wrap:pretty;}
  @media(max-width:860px){ .loc-wrap .loc-text p{max-width:none;} }
  .steps{max-width:1060px; margin:0 auto;}
  .step{display:grid; grid-template-columns:1fr 72px 1fr; column-gap:36px; align-items:start;}
  .step > *{padding-bottom:64px;}
  .step:last-child > *{padding-bottom:0;}
  .step-media{grid-column:1; grid-row:1;}
  .step-spine{grid-column:2; grid-row:1; position:relative; display:flex; justify-content:center; align-self:stretch; padding-bottom:0 !important;}
  .step-body{grid-column:3; grid-row:1; padding-top:4px;}
  .step-body h4{font-size:1.35rem; margin-bottom:10px;}
  .step-body p{font-size:1rem; line-height:1.7; color:var(--charcoal-soft);}
  .step-flip .step-media{grid-column:3;}
  .step-flip .step-body{grid-column:1;}
  .step-num{position:relative; z-index:1; width:48px; height:48px; border-radius:50%; background:var(--orange); color:var(--charcoal); font-weight:900; font-size:1.15rem; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--white);}
  .step-spine::after{content:""; position:absolute; top:54px; bottom:20px; left:50%; border-left:2px dashed rgba(255,147,10,0.75); transform:translateX(-1px);}
  .step-spine::before{content:""; position:absolute; bottom:10px; left:50%; width:10px; height:10px; border-right:2px solid var(--orange); border-bottom:2px solid var(--orange); transform:translateX(-50%) rotate(45deg);}
  .step:last-child .step-spine::after, .step:last-child .step-spine::before{display:none;}
  .retainer{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .retainer-text h2{margin-bottom:18px;}
  .retainer-text p{font-size:1.02rem; line-height:1.75; color:var(--charcoal-soft); max-width:56ch;}
  @media(max-width:860px){
    .retainer{grid-template-columns:1fr; gap:32px;}
  }
  @media(max-width:760px){
    .step{grid-template-columns:44px 1fr; column-gap:16px;}
    .step > *{padding-bottom:0;}
    .step-spine{grid-column:1; grid-row:1 / span 2;}
    .step-media, .step-flip .step-media{grid-column:2; grid-row:1; padding-bottom:16px;}
    .step-body, .step-flip .step-body{grid-column:2; grid-row:2; padding-top:0; padding-bottom:48px;}
    .step:last-child .step-body{padding-bottom:0;}
    .step-num{width:40px; height:40px; font-size:1rem; box-shadow:0 0 0 5px var(--white);}
    .step-spine::after{top:46px;}
    .step-body h4{font-size:1.2rem;}
  }
  @media(max-width:820px){
    .tabs{grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:28px;}
    .tabs button{height:52px; font-size:0.95rem;}
  }
  @media(max-width:520px){
    .tabs{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
    .tabs button{height:50px; font-size:0.9rem; padding:0 4px;}
  }
  @media(max-width:360px){ .tabs button{font-size:0.8rem;} }
  @media(max-width:600px){
    .stat-row{flex-wrap:nowrap; gap:8px;}
    .stat-row .stat{width:auto; flex:1 1 0; min-width:0; font-size:0.74rem;}
    .stat-row .stat strong{font-size:1.05rem;}
  }
  .loc-wrap{display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:center; max-width:1180px; margin:48px auto 0; text-align:left;}
  .loc-eyebrow{font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:#A85500; font-weight:700; margin-bottom:12px;}
  .loc-text p{color:var(--charcoal-soft); font-size:1rem; line-height:1.7; max-width:52ch;}
  .loc-block + .loc-block{margin-top:34px;}
  .loc-card{background:#262822; border-radius:14px; padding:22px; box-shadow:0 18px 40px rgba(58,60,53,0.2);}
  .loc-card svg{width:100%; height:auto; display:block;}
  @media(hover:hover){ .loc-card:hover{transform:translateY(-8px); box-shadow:0 28px 54px rgba(58,60,53,0.3); transition:opacity .7s ease, transform .11s ease-out, box-shadow .11s ease-out;} }
  .wgrid > .ph-note{position:relative; z-index:1; cursor:default;}
  @media(hover:hover){ .wgrid > .ph-note:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2; transition:opacity .7s ease, transform .09s ease-out, box-shadow .09s ease-out;} }
  .loc-arc{fill:none; stroke:#FF930A; stroke-width:1.6; stroke-dasharray:4 6; opacity:0.85; filter:drop-shadow(0 0 3px rgba(255,147,10,0.8)); animation:locflow 16s linear infinite;}
  @keyframes locflow{to{stroke-dashoffset:-240;}}
  .loc-tri{filter:drop-shadow(0 0 5px rgba(255,147,10,0.9));}
  .loc-pulse{fill:#FF930A; opacity:0.5; transform-box:fill-box; transform-origin:center; animation:locpulse 2.6s ease-out infinite;}
  @keyframes locpulse{0%{transform:scale(1); opacity:0.55;} 100%{transform:scale(4.2); opacity:0;}}
  .loc-dest{fill:#FF930A; stroke:#262822; stroke-width:2;}
  .loc-label{font-size:15px; font-weight:700; fill:#FAF7F2; paint-order:stroke; stroke:#262822; stroke-width:4px; stroke-linejoin:round;}
  .loc-label-home{font-size:17px;}
  .loc-label-tri{fill:#FFB04D;}
  .loc-legend{display:flex; gap:22px; flex-wrap:wrap; margin-top:16px; font-size:0.85rem; color:var(--charcoal-soft);}
  .loc-legend span{display:inline-flex; align-items:center; gap:8px;}
  .loc-key-home{display:inline-block; width:12px; height:12px; border-radius:50%; background:#FF930A; border:2px solid var(--cream); box-shadow:0 0 0 1px var(--charcoal-soft);}
  .loc-key-dest{display:inline-block; width:8px; height:8px; border-radius:50%; background:#FF930A;}
  @media(prefers-reduced-motion:reduce){ .loc-arc, .loc-pulse{animation:none;} }
  @media(max-width:860px){ .loc-wrap{grid-template-columns:1fr; gap:36px;} }
  @media(max-width:600px){ .loc-label{display:none;} .loc-card{padding:14px;} }

  .acc-select{border:1px solid var(--line); background:var(--white);}
  .acc-head{padding:14px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:0.95rem; color:var(--charcoal-soft);}
  .acc-select.filled .acc-head{color:var(--charcoal);}
  .acc-opts{max-height:0; overflow:hidden; transition:max-height .2s ease;}
  .acc-select.open .acc-opts{max-height:240px; overflow-y:auto;}
  .acc-opt{padding:10px 16px; font-size:0.9rem; border-top:1px solid var(--line); cursor:pointer;}
  @media(hover:hover){ .acc-opt:hover{background:var(--cream);} }
  .form-col{max-width:560px; margin:0 auto; display:grid; gap:12px;}

  footer{--footer:#2B2D27; --charcoal-soft:#D9D5CB; background:var(--footer); color:var(--cream); padding:56px 48px 34px; text-align:left;}
  .foot-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:start;}
  .foot-logo{display:block; width:fit-content; cursor:pointer; transition:transform .12s ease; transform-origin:center center;}
  .foot-logo.tap-active{transform:scale(0.92);}
  @media(hover:hover){ .foot-logo:hover{transform:scale(1.06);} }
  .foot-logo img{height:34px; width:auto; display:block;}
  .foot-email{display:inline-block; margin-top:22px; color:rgba(241,248,226,0.82); text-decoration:none; font-size:0.98rem; transition:color .2s ease;}
  @media(hover:hover){ .foot-email:hover{color:var(--orange);} }
  .foot-social{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px;}
  .foot-links{display:flex; gap:2px; flex-wrap:wrap;}
  .foot-links span{display:inline-flex; align-items:center; padding:8px; cursor:pointer; color:var(--cream); transition:transform .15s ease, color .15s ease;}
  @media(hover:hover){ .foot-links span:hover{transform:translateY(-3px);} }
  @media(hover:hover){ .foot-links span:hover svg[stroke]{stroke:var(--orange);} }
  @media(hover:hover){ .foot-links span:hover svg [fill="var(--charcoal-soft)"]{fill:var(--orange);} }
  @media(hover:hover){ .foot-links span:hover svg [stroke="var(--charcoal-soft)"]{stroke:var(--orange);} }
  .foot-links span:active, .foot-links span.tap-active{transform:scale(0.93);}
  .foot-links span:active svg[stroke], .foot-links span.tap-active svg[stroke]{stroke:var(--orange);}
  .foot-links span:active svg [fill="var(--charcoal-soft)"], .foot-links span.tap-active svg [fill="var(--charcoal-soft)"]{fill:var(--orange);}
  .foot-links span:active svg [stroke="var(--charcoal-soft)"], .foot-links span.tap-active svg [stroke="var(--charcoal-soft)"]{stroke:var(--orange);}
  .foot-links span > a{display:inline-flex; align-items:center; padding:8px; margin:-8px; color:inherit; text-decoration:none;}
  @media(hover:hover){ .foot-links span:hover svg[fill="var(--charcoal-soft)"]{fill:var(--orange);} }
  .foot-links span:active svg[fill="var(--charcoal-soft)"], .foot-links span.tap-active svg[fill="var(--charcoal-soft)"]{fill:var(--orange);}
  .foot-links span.foot-review > a{padding:8px 0; margin:-8px 0;}
  .foot-links span.foot-review{color:var(--orange); font-size:0.95rem; padding:8px 0;}
  @media(hover:hover){ .foot-links span.foot-review:hover{color:var(--cream);} }
  .foot-eyebrow{font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:18px;}
  .foot-nav{display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:26px; font-size:1.02rem;}
  .foot-nav .fn-short{display:none;}
  @media(max-width:600px){ .foot-nav .fn-short{display:inline;} }
  .foot-nav span, .foot-nav a{cursor:pointer; color:var(--mint); text-decoration:none; transition:transform .2s ease, color .2s ease;}
  @media(hover:hover){ .foot-nav span:hover, .foot-nav a:hover{transform:translateY(-2px); color:var(--orange);} }
  .subscribe{display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(250,247,242,0.45); max-width:none; transition:border-color .2s ease;}
  .subscribe:focus-within{border-bottom-color:var(--orange);}
  .subscribe input{flex:1; min-width:0; background:transparent; border:none; color:var(--cream); padding:12px 2px; font-family:inherit; font-size:0.95rem; outline:none;}
  .subscribe input::placeholder{color:rgba(250,247,242,0.55);}
  .subscribe button{background:none; border:none; color:var(--cream); font-family:inherit; font-weight:700; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; padding:10px 2px; transition:color .2s ease;}
  @media(hover:hover){ .subscribe button:hover{color:var(--orange);} }
  .foot-right{justify-self:end; width:100%; max-width:460px;}
  .foot-review-row{margin-top:20px;}
  .foot-icons{margin-left:-8px;}
  .foot-bottom{margin-top:30px; padding-top:20px; border-top:1px solid rgba(250,247,242,0.14); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:0.8rem; color:rgba(250,247,242,0.6);}
  @media(min-width:861px){ footer .foot-bottom{padding-right:60px;} }
  @media(max-width:860px){ footer .foot-bottom{padding-bottom:34px;} }
  .foot-legal{display:flex; gap:22px;}
  .foot-legal a{cursor:pointer; transition:color .2s ease;}
  @media(hover:hover){ .foot-legal a:hover{color:var(--orange);} }
  @media(max-width:860px){
    footer{padding:40px 24px 34px;}
    .foot-grid{display:flex; flex-direction:column; align-items:stretch; gap:0;}
    .foot-brand, .foot-right{display:contents;}
    .foot-logo{order:1; align-self:flex-start;}
    .foot-brand > div:nth-child(2){order:2;}
    .foot-social{order:3;}
    .foot-review-row{order:4;}
    .foot-eyebrow{order:5; margin-top:28px;}
    .subscribe{order:6;}
    .foot-nav{order:7; gap:12px 24px; margin-top:28px;}
    .subscribe{max-width:none;}
    .foot-right{justify-self:stretch; max-width:none;}
    .foot-bottom{flex-direction:column; align-items:center; text-align:center; gap:12px; margin-top:24px;}
    .foot-legal{order:1; justify-content:center;}
    .foot-bottom > span{order:2;}
  }
  @media(max-width:600px){
    .foot-nav{justify-content:space-between; gap:12px 8px;}
    .foot-nav .fn-long{display:none;}
    .foot-icons{width:auto; margin:0 0 0 -10px; justify-content:flex-start; gap:4px;}
    .foot-icons span > a{padding:10px; margin:-8px;}
    .foot-icons svg{width:24px; height:24px;}
  }
  @media(max-width:360px){ .foot-nav{font-size:0.92rem;} }
  @media(max-width:345px){ .foot-nav{font-size:0.84rem; gap:12px 6px;} }

  /* press and hold on touch screens mirrors the hover float */
  .scard, .wcard, .pscard, .tcard, .tabs button, .loc-card, .wgrid > .ph-note, .foot-links span, .foot-nav span, .foot-nav a, .foot-legal a, .foot-email, .faq-q, .logo, .foot-logo{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
  .press-name{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
  .pstep{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
  html .logo.hold{transform:scale(1.06);}
  html .pscard.hold{transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.12);}
  html .tcard.hold{transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.12);}
  html .tabs button:not(.active).hold{transform:translateY(-4px); background:var(--charcoal); color:var(--cream); box-shadow:0 10px 20px rgba(0,0,0,0.12);}
  html .wcard.hold{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2;}
  html .scard.hold{transform:translateY(-8px) scale(1.03); box-shadow:0 16px 32px rgba(0,0,0,0.14);}
  html .faq-item.hold{transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.08);}
  html .loc-card.hold{transform:translateY(-8px); box-shadow:0 28px 54px rgba(58,60,53,0.3); transition:opacity .7s ease, transform .11s ease-out, box-shadow .11s ease-out;}
  html .wgrid > .ph-note.hold{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2; transition:opacity .7s ease, transform .09s ease-out, box-shadow .09s ease-out;}
  html .foot-links span.hold{transform:translateY(-3px);}
  html .foot-links span.hold svg[stroke]{stroke:var(--orange);}
  html .foot-links span.hold svg [fill="var(--charcoal-soft)"]{fill:var(--orange);}
  html .foot-links span.hold svg [stroke="var(--charcoal-soft)"]{stroke:var(--orange);}
  html .foot-links span.foot-review.hold{color:var(--cream);}
  html .foot-nav span.hold, html .foot-nav a.hold{transform:translateY(-2px); color:var(--orange);}
  html .foot-logo.hold{transform:scale(1.06);}
  html .foot-links span.hold svg[fill="var(--charcoal-soft)"]{fill:var(--orange);}

  /* ---- batch 6 ---- */
  .foot-right{align-self:center;}
  /* logo carousel */
  .trusted-marquee{position:relative; width:100%; overflow:hidden;}
  .trusted-marquee::before,.trusted-marquee::after{content:''; position:absolute; top:0; bottom:0; width:9%; z-index:2; pointer-events:none;}
  .trusted-marquee::before{left:0; background:linear-gradient(to right,var(--cream),rgba(250,247,242,0));}
  .trusted-marquee::after{right:0; background:linear-gradient(to left,var(--cream),rgba(250,247,242,0));}
  .tm-track{display:flex; width:max-content; animation:tmscroll 40s linear infinite; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
  .tm-track.tm-off{animation-play-state:paused;}
  .tm-set{display:flex; flex:none; align-items:center;}
  .tm-set .logo-box{flex:none; min-width:210px; height:76px; padding:0 38px; justify-content:center; text-align:center; font-weight:800; font-size:1.2rem; letter-spacing:0.01em; color:var(--charcoal-soft); white-space:nowrap; opacity:0.85;}
  @keyframes tmscroll{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}
  @media(max-width:600px){ .tm-set .logo-box{min-width:150px; height:60px; padding:0 24px; font-size:1rem;} .tm-track{animation-duration:32s;} }
  @media(prefers-reduced-motion:reduce){ .tm-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center;} .tm-set[aria-hidden="true"]{display:none;} .tm-set{flex-wrap:wrap; justify-content:center;} .trusted-marquee::before,.trusted-marquee::after{display:none;} }
  /* merged problem section */
  .section.merged{padding-top:90px;}
  .merged .mg-top{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;}
  .merged .problem{max-width:none; margin:0; text-align:left;}
  .merged .ba-wrap{max-width:none; margin:0; width:100%; min-width:0;}
  .mg-eyebrow{max-width:1180px; margin:76px auto 24px; text-align:center; font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--charcoal-soft);}
  .psrows{max-width:1180px; margin:0 auto; display:grid; grid-auto-rows:1fr; gap:14px;}
  .psrows .pscard{display:grid; grid-template-columns:1fr 1fr; flex-direction:unset; overflow:hidden;}
  .psrows .pbody{display:flex; align-items:center; gap:22px; padding:28px 34px; flex:none;}
  .pico{flex:none; width:58px; height:58px; border-radius:50%; border:1.5px solid var(--charcoal); background:var(--cream); color:var(--charcoal); display:flex; align-items:center; justify-content:center;}
  .psrows .pscard h4{font-size:1.1rem;}
  .psrows .pscard .sol{position:relative; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:24px 34px 24px 48px; font-size:1.02rem; line-height:1.45;}
  .psrows .sol b{display:block; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;}
  .psrows .sol::before{content:''; position:absolute; left:0; top:50%; margin-top:-12px; border:12px solid transparent; border-right-width:0; border-left-color:var(--card);}
  @media(hover:hover){ .psrows .pscard:hover{transform:translateY(-4px) scale(1.01);} }
  html .psrows .pscard.hold{transform:translateY(-4px) scale(1.01);}
  @media(max-width:900px){
    .merged .mg-top{grid-template-columns:1fr; gap:32px;}
    .merged .problem{text-align:center;}
    .mg-eyebrow{margin-top:56px;}
    .psrows .pscard{grid-template-columns:1fr;}
    .psrows .pbody{padding:24px 22px; gap:16px; align-items:flex-start;}
    .pico{width:50px; height:50px;}
    .psrows .pscard .sol{padding:22px 22px 20px; font-size:0.98rem;}
    .psrows .sol::before{left:40px; top:0; margin:0; border:11px solid transparent; border-bottom-width:0; border-top-color:var(--card); border-left-color:transparent;}
  }
  .merged .problem h2{text-wrap:balance;}
  @media(max-width:900px){ .psrows{grid-auto-rows:auto;} .merged .ba{aspect-ratio:3/2;} }
  /* how it works: bigger icons, longer arrows */
  .process-row{max-width:1000px;}
  .pstep{width:220px; gap:20px;}
  .pstep span{font-size:1.12rem;}
  .picon{width:148px; height:148px;}
  .picon svg{width:60px; height:60px;}
  .pnum{width:34px; height:34px; font-size:1rem; top:0; right:0;}
  .parrow{height:148px; padding:0 6px;}
  .parrow svg{width:96px; height:30px;}
  @media(max-width:900px){
    .process-row{max-width:700px;}
    .pstep{width:150px;} .picon{width:112px; height:112px;} .picon svg{width:46px; height:46px;} .pnum{width:28px; height:28px; font-size:0.9rem; top:-2px; right:-2px;}
    .parrow{height:112px; padding:0 4px;} .parrow svg{width:56px; height:24px;}
  }
  @media(max-width:600px){
    .pstep{width:92px; gap:12px;} .pstep span{font-size:0.86rem;}
    .picon{width:76px; height:76px;} .picon svg{width:34px; height:34px;} .pnum{width:22px; height:22px; font-size:0.74rem; top:-3px; right:-3px;}
    .parrow{height:76px; padding:0;} .parrow svg{width:28px; height:16px;}
  }
  @media(max-width:360px){
    .pstep{width:78px;} .pstep span{font-size:0.78rem;}
    .picon{width:60px; height:60px;} .picon svg{width:26px; height:26px;}
    .parrow{height:60px;} .parrow svg{width:20px; height:12px;}
  }

  /* ---- batch 7 ---- */
  .ba-layer{position:absolute; inset:0; overflow:hidden;}
  .tm-set .logo-box.has-logo img{height:var(--h,40px); width:auto; display:block; pointer-events:none; user-select:none;}
  .trusted-marquee.mono .tm-set .logo-box.has-logo img{filter:grayscale(1) contrast(1.05); opacity:0.78;}
  @media(max-width:600px){ .tm-set .logo-box.has-logo img{height:calc(var(--h,40px)*0.72);} }
  html .tm-set .logo-box.reveal{opacity:0.85; transform:none; transition:none;}
  .tm-track{animation-duration:48s;}
  @media(max-width:600px){ .tm-track{animation-duration:38s;} }
  a.shop-btn{text-decoration:none; text-align:center;}
  @media(min-width:861px){ a.shop-btn{display:inline-block;} }
  a.mobile-shop{text-decoration:none;}
  .foot-email{transition:transform .2s ease, color .2s ease;}
  @media(hover:hover){ .foot-email:hover{transform:translateY(-2px);} .foot-legal a:hover{transform:translateY(-2px);} }
  .foot-legal a{transition:transform .2s ease, color .2s ease;}
  html .foot-email.hold{transform:translateY(-2px); color:var(--orange);}
  html .foot-legal a.hold{transform:translateY(-2px); color:var(--orange);}
  .foot-email-r{margin-top:20px;}
  .foot-email-r .foot-email{margin-top:0;}
  @media(min-width:861px){ .foot-email-l{display:none;} }
  @media(max-width:860px){ .foot-email-r{display:none;} }

  /* ---- thank you states ---- */
  #page-contact .contact-mark.tmark svg{width:46%; height:46%; color:var(--charcoal);}
  #thanks-head, #form-thanks{scroll-margin-top:90px;}
  .form-thanks{max-width:560px; margin:30px auto 0; text-align:center; padding:52px 30px; background:var(--white); border:1px solid var(--line); animation:thanksIn .5s ease both;}
  .form-thanks .tick, .sub-thanks svg{color:var(--charcoal);}
  .form-thanks .tick{width:68px; height:68px; margin:0 auto 20px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center;}
  .form-thanks h3{font-size:1.5rem; margin-bottom:10px;}
  .form-thanks p{color:var(--charcoal-soft); margin-bottom:26px;}
  .thanks-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
  .thanks-actions{align-items:stretch;} .thanks-actions .cta, .thanks-actions .cta-outline{margin:0; min-height:50px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;}
  @keyframes thanksIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  .sub-msg{display:none; color:#FF9C92; font-size:0.85rem; margin-top:8px;}
  .sub-thanks{display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid rgba(250,247,242,0.45); color:var(--cream); font-size:0.98rem; animation:thanksIn .5s ease both;}
  .sub-thanks[hidden]{display:none;}
  .sub-thanks svg{color:var(--orange); flex:none;}
  @media(max-width:860px){ .sub-msg, .sub-thanks{order:6;} }
  @media(prefers-reduced-motion:reduce){ .form-thanks, .sub-thanks{animation:none;} }

  /* Card fade fix: cards had their own transitions that overrode the fade, so they popped in. */
  .reveal:not(.settled){opacity:0; transition:opacity .7s ease, transform .7s ease;}
  .reveal.visible:not(.settled){opacity:1;}
  .reveal.settled{transition:transform .09s ease-out, box-shadow .09s ease-out;}
  .wcard.reveal.settled{transition:transform .11s ease-out;}
  @media(prefers-reduced-motion:reduce){ .reveal:not(.settled){opacity:1; transition:none;} }

  /* Shaded bands fade in on scroll, slightly ahead of the content inside them */
  .bgfade{isolation:isolate; background-color:transparent !important;}
  .bgfade::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--bgc); opacity:0; transition:opacity var(--bgd,.9s) ease; pointer-events:none;}
  .bgfade.bg-in::before{opacity:1;}
  @media(prefers-reduced-motion:reduce){ .bgfade::before{opacity:1; transition:none;} }

/* BTS collage */
.bts-wrap{container-type:inline-size; max-width:1180px; margin:0 auto;}
.bts-grid{--g:12px; max-width:1180px; margin:0 auto -12px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(12,1fr); column-gap:var(--g); row-gap:0; aspect-ratio:1.69;}
.bts-tile{margin:0; min-height:0; padding-bottom:var(--g); box-sizing:border-box;}
.bts-tile img{width:100%; height:100%; object-fit:cover; display:block; border-radius:10px; background:var(--line);}
.bts-tile:nth-child(1){grid-column:1; grid-row:1/5;}
.bts-tile:nth-child(2){grid-column:1; grid-row:5/13;}
.bts-tile:nth-child(3){grid-column:2; grid-row:1/13;}
.bts-tile:nth-child(4){grid-column:3; grid-row:1/5;}
.bts-tile:nth-child(5){grid-column:3; grid-row:5/9;}
.bts-tile:nth-child(6){grid-column:3; grid-row:9/13;}
@media(max-width:860px){
  .bts-grid{--g:8px; margin-bottom:-8px; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(12,9.92cqw) auto; aspect-ratio:auto;}
  .bts-tile:nth-child(3){grid-column:1; grid-row:1/10;}
  .bts-tile:nth-child(1){grid-column:1; grid-row:10/13;}
  .bts-tile:nth-child(2){grid-column:2; grid-row:1/7;}
  .bts-tile:nth-child(4){grid-column:2; grid-row:7/10;}
  .bts-tile:nth-child(5){grid-column:2; grid-row:10/13;}
  .bts-tile:nth-child(6){grid-column:1 / 3; grid-row:13;}
  .bts-tile:nth-child(6) img{height:auto; aspect-ratio:16/9;}
}

/* BTS hover, same lift as the Work gallery cards */
.bts-tile{position:relative; z-index:1; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
.bts-tile img{transition:box-shadow .25s ease;}
@media(hover:hover){
  .bts-tile:hover{transform:translateY(-6px) scale(1.02); z-index:2;}
  .bts-tile:hover img{box-shadow:0 14px 28px rgba(0,0,0,0.14);}
}
html .bts-tile.hold{transform:translateY(-6px) scale(1.02); z-index:2;}
html .bts-tile.hold img{box-shadow:0 14px 28px rgba(0,0,0,0.14);}

/* Sitewide lift for non-link items (photos and stats), same feel as the gallery cards */
.ph-note{position:relative;}
@media(hover:hover){
  .ph-note:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2; transition:transform .09s ease-out, box-shadow .09s ease-out;}
  .stats3 .stat:hover, .strip-inner .stat:hover{transform:translateY(-4px);}
}
html .ph-note.hold{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2;}
html .stat.hold{transform:translateY(-4px);}

/* divider lines on the home page: under the Trusted by strip, and between the before and after block and the three cards */
.mg-rule{height:1px; background:var(--line); margin:64px -28px 0;}
.mg-rule + .mg-eyebrow{margin-top:64px;}
@media(max-width:900px){ .mg-rule{margin-top:48px;} .mg-rule + .mg-eyebrow{margin-top:48px;} }
.mg-head{max-width:760px; margin:50px auto 32px; text-align:center;}
.mg-head h2{text-wrap:balance;}
.mg-head p{max-width:none; margin-top:10px; font-size:1.15rem; color:var(--charcoal-soft);}
@media(max-width:900px){ .mg-head{margin-top:37px; margin-bottom:28px;} }

.pstep .pdesc{display:block; font-size:0.92rem; font-weight:400; line-height:1.4; color:var(--charcoal-soft); text-align:center; margin-top:-2px; text-wrap:balance;}
@media(max-width:600px){ .pstep .pdesc{font-size:0.74rem; margin-top:-4px;} }
@media(max-width:380px){ .pstep .pdesc{font-size:0.7rem;} }

.band-title{font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 34px; text-wrap:balance;}
@media(max-width:600px){ .band-title{margin-bottom:28px;} }

@media(min-width:901px){ .picon{width:164px; height:164px; border-width:3px;} .picon svg{width:66px; height:66px;} .pnum{width:36px; height:36px; font-size:1.05rem;} .parrow{height:164px;} .pstep{width:240px;} .process-row{max-width:1060px;} }
@media(max-width:900px){ .picon{border-width:2.5px;} }
@media(hover:hover){ .pstep:hover .picon{animation-play-state:paused;} }
html .pstep.hold .picon{animation-play-state:paused;}


.merged .problem p, .merged .ba-cap, .merged .pscard p, .merged .pscard .sol{text-wrap:balance;}
.mg-proof{max-width:760px; margin:44px auto 0; text-align:center;}
.mg-proof .rstars{color:var(--orange); letter-spacing:3px; font-size:1.05rem; line-height:1;}
.mg-proof blockquote{margin:12px 0 0; font-size:1.3rem; line-height:1.4; font-weight:600; color:var(--charcoal); text-wrap:balance;}
.mg-proof figcaption{margin-top:10px; font-size:0.9rem; color:var(--charcoal-soft);}
@media(max-width:900px){ .mg-proof{margin-top:32px;} .mg-proof blockquote{font-size:1.15rem;} }

/* even spacing around every divider line on the home page: same blank space above and below each line */
#page-home .hero{padding-bottom:64px;}
#page-home .strip{padding-top:60px; padding-bottom:57px;}
#page-home .section.merged{padding-top:64px;}
#page-home .band.band-white{padding-bottom:64px; border-bottom:0;}
#page-home .band.band-white + .section{padding-top:50px;}
#page-home .band.band-white{padding-top:49px;}
#page-home .section.tight.bgfade{padding-top:50px;}
#page-home .section.qlook{padding-top:50px; padding-bottom:64px;}
#page-home .section.merged{padding-bottom:64px;}

#page-home .section.qfaq{padding-top:50px;}
@media(max-width:900px){ #page-home .section.qfaq{padding-top:37px;} }
@media(max-width:900px){
  #page-home .hero{padding-bottom:48px;}
  #page-home .strip{padding-top:43px; padding-bottom:40px;}
  #page-home .section.tight.bgfade{padding-top:37px; padding-bottom:48px;}
  #page-home .section.qlook{padding-top:37px; padding-bottom:48px;}
  #page-home .section.merged{padding-bottom:48px;}
  #page-home .section.merged{padding-top:37px;}
  #page-home .band.band-white{padding-bottom:48px; padding-top:36px;}
  #page-home .band.band-white + .section{padding-top:37px;}
}


/* press row sits between Trusted by and the work */
#page-home .band.band-press{background:var(--white); border-top:0; padding-top:0; padding-bottom:55px;}
@media(max-width:900px){ #page-home .band.band-press{padding-top:0; padding-bottom:42px;} }


/* home background rhythm: cream, white, cream, white ... with the dark band as the one break */
#page-home .strip{background:var(--white);}
#page-home .strip .trusted-marquee::before{background:linear-gradient(to right,var(--white),rgba(255,255,255,0));}
#page-home .strip .trusted-marquee::after{background:linear-gradient(to left,var(--white),rgba(255,255,255,0));}
#page-home .section.qfaq{background:var(--white); border-bottom:0; padding-bottom:64px !important;}
#page-home .section.qfaq .faq-item{background:var(--cream);}
#page-home .section.qfaq + .section.tight{padding-top:50px !important;}
@media(max-width:900px){ #page-home .section.qfaq{padding-bottom:48px !important;} #page-home .section.qrev{padding-bottom:46px !important;} #page-home .section.qfaq + .section.tight{padding-top:37px !important;} }


/* variant C rhythm: logos + press share one white block; strict alternation below */
#page-home .strip{border-bottom:0; padding-bottom:36px;}
#page-home .section.merged{background:var(--white);}
#page-home .section.qrev{background:var(--cream);}
@media(max-width:900px){ #page-home .strip{padding-bottom:28px;} }


/* top of home: logos and press share one white block; work cream; argument white */
#page-home .strip{border-bottom:0; padding-bottom:36px;}
#page-home .band.band-press{background:var(--white); border-top:0; border-bottom:0; padding-top:0; padding-bottom:55px;}
#page-home .section.qlook{background:var(--cream) !important;}
#page-home .section.merged{background:var(--white);}
@media(max-width:900px){ #page-home .band.band-press{padding-bottom:42px;} #page-home .strip{padding-bottom:28px;} }


/* logos + press share one white block; strict alternation below; review cards cream */
#page-home .strip{border-bottom:0; padding-bottom:36px;}
#page-home .band.band-press{background:var(--white); border-top:0; padding-top:0; padding-bottom:56px;}
#page-home .section.qlook{background:var(--cream) !important;}
#page-home .section.merged{background:var(--white);}
#page-home .band.band-white{background:var(--cream);}
#page-home .section.qrev{background:var(--white);}
#page-home .section.qrev .tcard{background:var(--cream);}
#page-home .section.qfaq{background:var(--cream);}
#page-home .section.qfaq .faq-item{background:var(--white);}
#page-home .section.qfaq + .section.tight{background-color:var(--white);}
@media(max-width:900px){ #page-home .band.band-press{padding-bottom:43px;} #page-home .strip{padding-bottom:28px;} }


/* closing call to action */
.ctafin{text-align:center; max-width:none; margin:0; border-radius:0; padding:84px 28px 88px;}
.ctafin h2{margin-bottom:10px;}
.ctafin-sub{color:var(--charcoal-soft); margin:0 0 6px;}
.ctafin-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:20px;}
.ctafin-btns .cta{margin-top:0;}
.ctafin-facts{display:flex; gap:36px; justify-content:center; flex-wrap:wrap; margin:34px auto 0; padding-top:26px; border-top:1px solid var(--line); max-width:760px; color:var(--charcoal-soft); font-size:0.9rem;}
.ctafin-facts b{display:block; color:var(--charcoal); font-size:1rem;}
@media(max-width:900px){ .ctafin-facts{gap:18px;} .ctafin{padding:56px 22px 60px;} }


/* hero: full bleed stage with the headline over the video */
.hero-stage{position:relative; min-height:clamp(520px,80vh,760px); background:#2B2D27; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.hero-media{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:22px; gap:6px; color:rgba(250,247,242,.55); font-size:0.85rem; background:linear-gradient(135deg,#3a3c35,#23251f);}
.hero-media video, .hero-media img.hero-fill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(rgba(20,21,18,.30),rgba(20,21,18,.58)); pointer-events:none;}
.hero-stage .hero-over{position:relative; z-index:2; padding:90px 28px 90px !important;}
.hero-stage .hero-over h1{color:var(--cream); text-shadow:0 2px 24px rgba(0,0,0,.35);}
.hero-stage .hero-side p{color:rgba(250,247,242,.9);}
@media(max-width:900px){ .hero-stage{min-height:min(78vh,620px);} .hero-stage .hero-over{padding:72px 24px !important;} }
#page-home .strip{padding-top:60px;}
#page-home .section.qfaq + .section.ctawrap{padding-top:0 !important; padding-bottom:20px !important; background:var(--cream);}
@media(max-width:900px){ #page-home .section.qfaq + .section.ctawrap{padding-top:0 !important; padding-bottom:14px !important;} }

/* closing call to action over a photo */
.ctafin{background-size:cover; background-position:center; color:var(--cream);}
.ctafin h2{color:var(--cream);}
.ctafin-sub{color:rgba(250,247,242,.85);}
.ctafin-btns .cta-outline{border-color:var(--cream); color:var(--cream);}
.ctafin-facts{border-top-color:rgba(250,247,242,.25); color:rgba(250,247,242,.78);}
.ctafin-facts b{color:var(--cream);}


/* closing photo card on About, Work and Services */
.ctawrap{padding-top:64px; padding-bottom:64px;}
@media(max-width:900px){ .ctawrap{padding-top:48px; padding-bottom:48px;} }


/* thin divider between the logo strip and the press row, same idea as the line inside the closing card */
#page-home .band.band-press .band-inner::before{content:''; display:block; height:1px; background:var(--line); max-width:760px; margin:0 auto 36px;}
#page-home .strip{padding-bottom:40px;}
@media(max-width:900px){ #page-home .band.band-press .band-inner::before{margin-bottom:28px;} #page-home .strip{padding-bottom:32px;} }


/* closing photo runs edge to edge, then a thin white bar before the footer */
.ctawrap{padding:0 0 20px !important; border-top:0 !important;}
@media(max-width:900px){ .ctawrap{padding:0 0 14px !important;} }


/* even space above the closing photo on About, Work and Services */
.page section:has(+ .ctawrap){padding-bottom:64px;}
@media(max-width:900px){ .page section:has(+ .ctawrap){padding-bottom:48px;} }


/* bigger tap areas on touch screens: invisible, nothing moves or changes size */
@media (pointer:coarse), (max-width:900px){
  .logo-box.press-name, .foot-nav span, .foot-nav a, .foot-legal a, .foot-email, .rmeta, .rbadge, .hamburger, .foot-icons span{position:relative;}
  .logo-box.press-name::after{content:""; position:absolute; inset:-14px -3px;}
  .foot-nav span::after, .foot-nav a::after{content:""; position:absolute; inset:-10px -6px;}
  .foot-legal a::after{content:""; position:absolute; inset:-12px -8px;}
  .foot-email::after{content:""; position:absolute; inset:-10px 0;}
  .rmeta::after{content:""; position:absolute; inset:-12px 0;}
  .rbadge::after{content:""; position:absolute; inset:-9px 0;}
  .hamburger::after{content:""; position:absolute; inset:-9px -8px;}
  .foot-icons span::after{content:""; position:absolute; inset:-5px; pointer-events:none;}
}


/* real photo in a process step */
.step-img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; background:var(--line);}

.step-body{align-self:center;}
.step-list{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px;}
.step-list + p{margin-top:18px;}
.step-list li{position:relative; padding-left:28px; font-weight:600; font-size:.95rem; color:var(--charcoal);}
.step-list li::before{content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; border-radius:50%; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;}
@media (max-width:900px){.step-body{align-self:start;} .step-list{margin-top:14px;}}
.step-list li.reveal:not(.settled){transition-delay:calc(var(--i,0) * 130ms);}
.step-list li:nth-child(2){--i:1;}
.step-list li:nth-child(3){--i:2;}
#page-services{position:relative;}
#page-services .retainer-media{position:relative; z-index:2;}
.steps.sa .step-spine::after{clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0);}
.steps.sa .step-spine::before{opacity:0; transition:opacity .3s ease;}
.steps.sa .step-spine.done::before{opacity:1;}
.steps.sa .step-num{opacity:0; transform:scale(.4); transition:opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1);}
.steps.sa .step-num.on{opacity:1; transform:scale(1);}
#page-home .hero h1.reveal, #page-home .hero .hero-side.reveal{transform:none !important;}
.merged .psrows .pscard .sol{align-items:flex-start; text-align:left; text-wrap:pretty;}
@media(min-width:901px){ #page-services .section-head p.steps-sub{max-width:none !important; white-space:nowrap;} }
#page-contact .section-head p{text-wrap:balance;}
@media(min-width:901px){ #page-contact .section-head{max-width:820px !important;} #page-contact .section-head p{max-width:none; white-space:normal;} }
#page-about .row2 > p{text-wrap:pretty;}
/* Home: Trusted by marquee runs nearly edge to edge */
#page-home .strip{padding-left:0; padding-right:0;}
#page-home .strip-inner{max-width:none; width:100%;}
#page-home .strip .trusted-marquee{width:100%;}
#page-home .strip .trusted-marquee::before,#page-home .strip .trusted-marquee::after{width:3.5%;}
@media(max-width:600px){ #page-home .strip .trusted-marquee::before,#page-home .strip .trusted-marquee::after{width:7%;} }
/* Desktop nav: logo and Shop Merch pinned to the corners, bigger links that scale with the screen (mobile untouched) */
@media(min-width:861px){
  header nav{max-width:none; padding:12px clamp(24px,2.6vw,48px);}
  header nav .logo-wide{height:clamp(26px,2.1vw,36px) !important;}
  .navlinks{gap:clamp(22px,2.7vw,52px); font-size:clamp(0.92rem,0.55vw + 0.6rem,1.2rem);}
  .navlinks a{padding:6px 0;}
  a.shop-btn{padding:clamp(9px,0.75vw,13px) clamp(18px,1.5vw,28px); font-size:clamp(0.9rem,0.4vw + 0.64rem,1.08rem);}
}
/* even spacing around divider lines on About and Services */
#page-about > section:nth-of-type(1){padding-bottom:78px;}
#page-about > section:nth-of-type(4){padding-top:50px;}
#page-about > #testimonials{padding-top:54px;}
#page-services > section:nth-of-type(1){padding-bottom:80px;}
#page-services > section:nth-of-type(2){padding-top:66px; padding-bottom:80px;}
#page-services > section:nth-of-type(3){padding-top:72px;}
@media(max-width:900px){
  #page-about > section:nth-of-type(1){padding-bottom:75px;}
  #page-about > section:nth-of-type(4){padding-top:59px;}
  #page-about > #testimonials{padding-top:58px;}
  #page-services > section:nth-of-type(2){padding-top:69px; padding-bottom:72px;}
  #page-services > section:nth-of-type(3){padding-top:69px;}
}

/* Home: How It Works. Circles line up with the three cards below, longer dashed arrows like the Services steps, all scaling with the screen */
#page-home .process-row{--c:clamp(68px,12vw,156px); --g:24px; --ap:12px; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--g); width:100%; max-width:none; margin:0 auto; align-items:start; justify-items:center;}
#page-home .process-row > .pstep{width:auto; max-width:100%; min-width:0; gap:clamp(8px,1.2vw,16px);}
#page-home .process-row .picon{width:var(--c) !important; height:var(--c) !important;}
#page-home .process-row .picon svg{width:calc(var(--c) * 0.45) !important; height:calc(var(--c) * 0.45) !important;}
#page-home .process-row .pnum{display:none !important;}
#page-home .process-row .pstep span{font-size:clamp(.82rem,.55vw + .6rem,1.15rem);}
#page-home .process-row .pdesc{font-size:clamp(.74rem,.4vw + .55rem,1rem); line-height:1.4; text-wrap:balance;}
#page-home .parrow{position:absolute; top:calc(var(--c) / 2 - 8px); height:16px; padding:0 !important; display:block; font-size:0;}
#page-home .parrow svg{display:none !important;}
#page-home .parrow::after{content:""; position:absolute; left:0; right:6px; top:50%; border-top:2px dashed rgba(255,147,10,.75); transform:translateY(-1px);}
#page-home .parrow::before{content:""; position:absolute; right:1px; top:50%; width:10px; height:10px; border-top:2px solid var(--orange); border-right:2px solid var(--orange); transform:translateY(-50%) rotate(45deg);}
#page-home .process-row > .parrow:nth-child(2){left:calc((100% - 2 * var(--g)) / 6 + var(--c) / 2 + var(--ap)); width:calc(50% - (100% - 2 * var(--g)) / 6 - var(--c) - 2 * var(--ap));}
#page-home .process-row > .parrow:nth-child(4){left:calc(50% + var(--c) / 2 + var(--ap)); width:calc(50% - (100% - 2 * var(--g)) / 6 - var(--c) - 2 * var(--ap));}
@media(max-width:600px){ #page-home .process-row{--g:10px; --ap:5px;} }
#page-home .process-row .pstep-eb{font-style:normal; font-weight:800; font-size:clamp(.6rem,.3vw + .5rem,.82rem); letter-spacing:.16em; color:var(--orange); margin-bottom:-4px; line-height:1;}

/* Accordion icon: a plus that morphs smoothly into a minus when open (FAQ and contact form dropdowns) */
.faq-q .plus, .acc-head .plus{position:relative; display:inline-block; flex:none; width:14px; height:14px; font-size:0 !important; line-height:0; color:transparent !important; margin-left:12px; transform:none !important; transition:none !important;}
.faq-q .plus::before, .faq-q .plus::after, .acc-head .plus::before, .acc-head .plus::after{content:""; position:absolute; left:0; top:50%; width:100%; height:2px; margin-top:-1px; border-radius:2px; background:var(--orange); transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .22s ease;}
.faq-q .plus::after, .acc-head .plus::after{transform:rotate(90deg);}
.faq-item.open .faq-q .plus::after, .acc-select.open .acc-head .plus::after{transform:rotate(0deg); opacity:0;}
@media(prefers-reduced-motion:reduce){ .faq-q .plus::before, .faq-q .plus::after, .acc-head .plus::before, .acc-head .plus::after{transition:none;} }

/* Contact: logo mark in a small circle above the headline */
#page-contact .contact-mark{width:clamp(68px,6vw,88px); height:clamp(68px,6vw,88px); margin:0 auto 18px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(58,60,53,.12), 0 8px 22px rgba(58,60,53,.12);}
#page-contact .contact-mark{overflow:hidden; padding:2px; box-sizing:border-box; box-shadow:0 8px 22px rgba(58,60,53,.12);}
#page-contact .contact-mark img{display:block; height:100%; width:auto; user-select:none; pointer-events:none;}
/* Contact avatar: float on hover (uses the translate property so it never fights the fade transform) */
#page-contact .contact-mark{translate:0 0; cursor:default;}
#page-contact .contact-mark.reveal.settled, #page-contact .contact-mark:not(.reveal){transition:translate .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;}
@media (hover:hover){
#page-contact .contact-mark.settled:hover, #page-contact .contact-mark:not(.reveal):hover{translate:0 -8px; box-shadow:0 18px 32px rgba(58,60,53,.2);}
}
html #page-contact .contact-mark.hold{translate:0 -8px !important; box-shadow:0 18px 32px rgba(58,60,53,.2) !important;}
@media (prefers-reduced-motion:reduce){#page-contact .contact-mark{transition:none !important; translate:0 0 !important;}}
/* Services photo cards: same hover lift as the other cards (translate/scale props so the fade transform never conflicts) */
.step-media .step-img, .retainer-media .step-img{translate:0 0; scale:1; position:relative;}
.step-media .step-img.reveal.settled, .retainer-media .step-img.reveal.settled, .step-media .step-img:not(.reveal), .retainer-media .step-img:not(.reveal){transition:translate .12s ease-out, scale .12s ease-out, box-shadow .12s ease-out;}
@media (hover:hover){
.step-media .step-img.settled:hover, .retainer-media .step-img.settled:hover, .step-media .step-img:not(.reveal):hover, .retainer-media .step-img:not(.reveal):hover{translate:0 -6px; scale:1.02; box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2;}
}
html .step-media .step-img.hold, html .retainer-media .step-img.hold{translate:0 -6px !important; scale:1.02 !important; box-shadow:0 14px 28px rgba(0,0,0,0.14) !important; z-index:2;}
@media (prefers-reduced-motion:reduce){.step-media .step-img, .retainer-media .step-img{transition:none !important; translate:0 0 !important; scale:1 !important;}}
/* How It Works: only the circle and icon react to hover or touch, never the text */
@media (hover:hover){
.pstep:hover{transform:none;}
.pstep:hover .picon{border-color:var(--charcoal); box-shadow:0 10px 24px rgba(58,60,53,0.08);}
.pstep .picon:hover{border-color:var(--orange); box-shadow:0 16px 30px rgba(58,60,53,0.16); translate:0 -6px;}
}
html .pstep.hold{transform:none;}
html .pstep.hold .picon{border-color:var(--charcoal); box-shadow:0 10px 24px rgba(58,60,53,0.08);}
html .pstep .picon.hold{border-color:var(--orange); box-shadow:0 16px 30px rgba(58,60,53,0.16); translate:0 -6px; animation-play-state:paused;}
.pstep .picon{translate:0 0; transition:box-shadow .3s ease, border-color .3s ease, translate .15s ease-out;}
@media (prefers-reduced-motion:reduce){.pstep .picon{translate:0 0 !important;}}
/* CTA facts: each fact on one line, row stretched across the band */
.ctafin-facts{max-width:min(1040px,100%); justify-content:space-between; flex-wrap:nowrap; gap:20px; font-size:clamp(.92rem,.5vw + .62rem,1.12rem);}
.ctafin-facts span{white-space:nowrap;}
.ctafin-facts b{display:inline; font-size:inherit; margin-right:0;}
@media(max-width:700px){ .ctafin-facts{flex-direction:column; align-items:center; justify-content:center; gap:10px; max-width:none;} }
/* CTA facts: closer together with dot separators */
.ctafin-facts{justify-content:center; align-items:center; gap:clamp(16px,2vw,30px); max-width:min(1040px,100%);}
.ctafin-facts span + span::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--orange); vertical-align:middle; margin-right:clamp(16px,2vw,30px); position:relative; top:-1px;}
@media(max-width:700px){ .ctafin-facts span + span::before{display:none;} }
/* CTA facts divider: same width as the Work featured in row */
.ctafin-facts{max-width:min(860px,100%);}
/* CTA facts divider: edge to edge like the Trusted By strip lines, text stays centered */
.ctafin-facts{max-width:none; margin-left:-28px; margin-right:-28px; padding-left:28px; padding-right:28px; justify-content:center;}
@media(max-width:900px){ .ctafin-facts{margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:22px;} }
/* CTA facts divider: exactly the width of the divider above Work featured in (760px max), centered */
.ctafin-facts{max-width:min(760px,100%); margin-left:auto; margin-right:auto; padding-left:0; padding-right:0;}
@media(max-width:900px){ .ctafin-facts{margin-left:auto; margin-right:auto; padding-left:0; padding-right:0;} }
/* Home closing CTA photo: crop higher so the top of the lens on the left stays in frame */
#page-home .ctafin{background-position:50% 30%;}
@media(max-width:700px){ #page-home .ctafin{background-position:18% 30%;} }
/* CTA facts: three facts spread end to end along the divider, dots evenly between */
.ctafin-facts{justify-content:space-between; gap:12px;}
.ctafin-facts span + span::before{display:none !important;}
.ctafin-facts .fdot{display:block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--orange);}
@media(max-width:700px){ .ctafin-facts{justify-content:center;} .ctafin-facts .fdot{display:none;} }
/* Home closing CTA photo: top of the lens sits right at the top edge of the frame (tied to width so it holds on every desktop size) */
#page-home .ctafin{background-position:0 0, 50% 45%;}
@media(min-width:1100px){ #page-home .ctafin{background-position:0 0, 50% calc(15px - 11.56vw);} }
@media(max-width:700px){ #page-home .ctafin{background-position:0 0, 18% 45%;} }
/* CTA facts on phones: back to three columns, bold line on top and the rest underneath */
@media(max-width:700px){
.ctafin-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:start; justify-content:stretch; max-width:100%; font-size:.86rem; line-height:1.35;}
.ctafin-facts .fdot{display:none;}
.ctafin-facts span{white-space:normal; text-align:center;}
.ctafin-facts b{display:block; font-size:1rem; margin:0 0 3px;}
}
@media(max-width:360px){ .ctafin-facts{font-size:.78rem; gap:6px;} .ctafin-facts b{font-size:.92rem;} }
/* CTA subline: short one line version on phones, full sentence on larger screens */
.ctafin-sub .sub-m{display:none;}
@media(max-width:700px){ .ctafin-sub .sub-d{display:none;} .ctafin-sub .sub-m{display:inline; white-space:nowrap;} }
/* Short headings on phones so they stay on one line */
h2 .h-m{display:none;}
@media(max-width:700px){ h2 .h-d{display:none;} h2 .h-m{display:inline;} }
/* About: heading above the founder bio, in the right column on desktop */
#page-about .bio-col{display:flex; flex-direction:column; justify-content:center;}
#page-about .bio-col h2{margin:0 0 14px;}
#page-about .bio-col p{margin:0;}
/* About: matching heading to text spacing in Our Mission and Meet Jaiel */
#page-about .bio-col h2{margin-bottom:20px;}
/* Section subline: short one line version on phones */
.mg-head p .sub-m{display:none;}
@media(max-width:700px){ .mg-head p .sub-d{display:none;} .mg-head p .sub-m{display:inline; white-space:nowrap;} }

/* multi page additions */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.wpanel{display:contents;} .wpanel[hidden]{display:none;}
a.wcard, a.scard{display:block; color:inherit; text-decoration:none;}
.navlinks a, .mobile-nav a{text-decoration:none;}
.navlinks a{display:inline-block; line-height:normal;}
a.logo, a.home-btn{text-decoration:none;}
a.home-btn{box-sizing:border-box;}
a.cta, a.cta-outline{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; box-sizing:border-box; line-height:normal; text-align:center;}
.foot-legal a{color:inherit; text-decoration:none; cursor:pointer; transition:color .2s ease;}
@media(hover:hover){ .foot-legal a:hover{color:var(--orange);} }
#testimonials{scroll-margin-top:100px;}

.scard .icon{width:84px; height:84px; border-radius:22px; background:rgba(255,147,10,.14); display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:background .15s ease;}
.scard .icon svg{width:54px; height:54px; stroke:var(--charcoal);}
.scard .icon .ic-o{fill:var(--orange); stroke:var(--orange);}
.scard .icon .ic-s{stroke:var(--orange);}
@media(hover:hover){.scard:hover .icon{background:rgba(255,147,10,.28);}}
html h1.as-h2{font-size:clamp(1.7rem,3vw,2.3rem); line-height:inherit; max-width:none; color:var(--charcoal); text-shadow:none; letter-spacing:-0.01em;}
.ph-media{position:relative; overflow:hidden; background:#0d0d0d; border-radius:10px; aspect-ratio:4/3;}
.ph-media img, .ph-media video{display:block; width:100%; height:100%; object-fit:cover;}
.ph-media video{object-fit:contain; background:#000;}
.ph-media video.loop{object-fit:cover;}
.ph-media video.tapvid{object-fit:cover; background:#000;}
.ph-media video.tapvid:fullscreen{object-fit:contain; background:#000;}
.ph-media video.tapvid:-webkit-full-screen{object-fit:contain; background:#000;}
.steps.step-anim .step-spine::after{clip-path:inset(0 0 100% 0); transition:clip-path 1s cubic-bezier(.4,0,.2,1) .25s;}
.steps.step-anim .step-spine::before{opacity:0; transition:opacity .35s ease 1.15s;}
.steps.step-anim .step-num{transform:scale(.7); opacity:0; transition:transform .45s cubic-bezier(.3,1.4,.5,1), opacity .3s ease;}
.steps.step-anim .step.step-in .step-spine::after{clip-path:inset(0 0 0 0);}
.steps.step-anim .step.step-in .step-spine::before{opacity:1;}
.steps.step-anim .step.step-in .step-num{transform:none; opacity:1;}
@media (prefers-reduced-motion: reduce){
  .steps.step-anim .step-spine::after{clip-path:none; transition:none;}
  .steps.step-anim .step-spine::before, .steps.step-anim .step-num{opacity:1; transform:none; transition:none;}
}
.cs-camp-title{margin:0 0 6px;}
.loop-play{z-index:2;}
.loop-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.yt-lite img[src*="sparkling-01"]{object-position:78% 38%;}
.cs-three.cs-portrait .ph-media{aspect-ratio:2/3;}
.cs-jump{font-size:.92rem; color:var(--charcoal-soft); margin:0 0 30px; max-width:none;} .cs-jump a{font-weight:700; color:var(--charcoal); text-decoration:none; border-bottom:1.5px solid var(--orange); margin:0 4px;} .cs-camp{scroll-margin-top:90px;}
.cs-mosaic{column-count:3; column-gap:12px;} .cs-mosaic .mo-item{break-inside:avoid; margin:0 0 12px; border-radius:10px; overflow:hidden;} .cs-mosaic .mo-item img{display:block; width:100%; height:auto;} .cs-mosaic .ph-media{margin:0;} @media(max-width:700px){.cs-mosaic{column-count:2; column-gap:10px;} .cs-mosaic .mo-item{margin-bottom:10px;}}
.cs-jump a{display:inline-block; padding:6px 0;} .cs-jump-l{margin-right:4px;}
@media(max-width:700px){
  .cs-jump{display:flex; flex-direction:column; gap:10px; align-items:stretch;} .cs-jump-l{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-soft);} .cs-jump-dot{display:none;}
  .cs-jump a{margin:0; border:1.5px solid var(--charcoal); border-radius:10px; padding:13px 16px; min-height:46px; display:flex; align-items:center; justify-content:space-between; text-decoration:none;} .cs-jump a::after{content:"↓"; color:var(--orange); font-weight:700;}
  .cs-three.cs-vert{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin-right:-28px; padding-right:28px; padding-bottom:6px; scrollbar-width:none;} .cs-three.cs-vert::-webkit-scrollbar{display:none;}
  .cs-three.cs-vert > *{flex:0 0 58%; scroll-snap-align:start;}
}

.cs-sec h4{font-size:2.05rem; font-weight:800; line-height:1.15; margin:0 0 10px; letter-spacing:-.01em;}
.cs-sec h4::before{content:""; display:block; width:48px; height:4px; border-radius:2px; background:var(--orange); margin-bottom:14px;}
.cs-sec .cs-blurb{font-size:1.04rem; line-height:1.6; color:var(--charcoal); opacity:.82; margin-bottom:20px; max-width:760px;}
.cs-camp .cs-camp-title{font-size:2rem; line-height:1.15; margin:0 0 10px;}
@media(max-width:700px){.cs-sec h4{font-size:1.65rem;} .cs-camp .cs-camp-title{font-size:1.75rem;} .cs-sec .cs-blurb{font-size:1rem;}}
.lb-host{cursor:zoom-in;} .lb-host:focus-visible{outline:3px solid var(--orange); outline-offset:3px;}
/* service area map card: same lift as the other cards */
.loc-card{transition:transform .09s ease-out, box-shadow .09s ease-out;}
@media(hover:hover){ html .loc-card:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.12); transition:transform .09s ease-out, box-shadow .09s ease-out;} }
html .loc-card.hold{transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.12); transition:transform .09s ease-out, box-shadow .09s ease-out;}
html.lb-open, html.lb-open body{overflow:hidden;}
.lb{position:fixed; inset:0; z-index:9999; background:rgba(18,18,16,.98); display:flex; align-items:center; justify-content:center; padding:64px 16px 56px; touch-action:pan-y pinch-zoom; overscroll-behavior:contain;}
.lb[hidden]{display:none;}
.lb-fig{margin:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.lb-img{width:100%; height:auto; max-height:100%; object-fit:contain; display:block;}
.lb-img.lb-sq{width:min(100%, calc(100dvh - 120px), 900px); aspect-ratio:1; object-fit:cover;}
.lb-count{position:absolute; left:0; right:0; bottom:20px; text-align:center; color:#d9d5cc; font-size:.85rem; letter-spacing:.06em; pointer-events:none;}
.lb button{position:absolute; border:0; background:rgba(255,255,255,.14); color:#fff; width:48px; height:48px; border-radius:50%; font-size:1.9rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 3px; -webkit-tap-highlight-color:transparent;}
.lb button:hover{background:rgba(255,255,255,.26);} .lb button:focus-visible{outline:3px solid var(--orange);} .lb button[hidden]{display:none;}
.lb-x{top:max(12px, env(safe-area-inset-top)); right:14px; font-size:2rem;} .lb-prev{left:14px; top:50%; margin-top:-24px;} .lb-next{right:14px; top:50%; margin-top:-24px;}
@media(max-width:700px){.lb{padding:64px 0 56px;} .lb-prev,.lb-next{width:44px; height:44px; background:rgba(18,18,16,.55);} .lb-prev{left:8px;} .lb-next{right:8px;}}
.cs-camp > .cs-blurb{font-size:1.08rem; line-height:1.6; max-width:760px;}
.cs-camp > .cs-camp-title{margin-bottom:0;} .cs-camp > .cs-blurb{margin-bottom:6px;} .cs-jump{margin-bottom:0 !important;}
.cs > .cs-sec.cs-gal, .cs-camp > .cs-sec.cs-gal{margin-top:8px;} .cs-camp > .cs-sec.cs-gal:first-of-type{margin-top:0;}
/* The swipe strip fades in as one block; its videos never fade one by one, so ones off to the side are never left invisible. */
.cs-vert .ph-media.reveal{opacity:1 !important; transform:none !important; transition:none !important; filter:none !important;}
@media(min-width:701px){.cs-three.cs-vert4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}}
@media(max-width:700px){.cs > .cs-sec.cs-gal, .cs-camp > .cs-sec.cs-gal{margin-top:0;}}
.cs-four{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;} @media(max-width:700px){.cs-four{grid-template-columns:1fr 1fr;}}
.yt-lite{cursor:pointer;}
.yt-play{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; display:block;}
.yt-btn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.93); color:var(--charcoal); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,.28); transition:transform .15s;}
.yt-btn svg{margin-left:4px;}
.yt-play:hover .yt-btn{transform:translate(-50%,-50%) scale(1.06);}
.yt-play:focus-visible{outline:3px solid var(--orange); outline-offset:-3px;}
.yt-lite iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.yt-note{margin:-16px 0 0; text-align:right; font-size:.85rem;}
.yt-note a{color:var(--charcoal-soft); text-decoration:underline;}
.row2 .yt-note{margin:8px 0 0;}
.cs-sec .yt-note{margin:10px 0 16px;}
.vgrid{display:grid; grid-template-columns:1fr 1fr; gap:34px 22px;}
.vtile .ph-media{margin:0;}
.vcap{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:10px; font-size:.92rem; font-weight:600; color:var(--charcoal); line-height:1.35;}
.vcap a{flex:none; font-weight:400; font-size:.82rem; color:var(--charcoal-soft); text-decoration:underline;}
@media (max-width:640px){.vgrid{grid-template-columns:1fr; gap:28px;}}
.ph-media.soon{display:flex; align-items:center; justify-content:center; background:#2b2b26; color:#faf7f2; font-weight:600; letter-spacing:.03em; text-align:center; padding:16px; font-size:.95rem;}
.cs-blurb{font-size:.92rem; color:var(--charcoal-soft); margin-bottom:16px;}
.cs-sec .cs-pair, .cs-sec .cs-three{margin-top:0;}
.cs-sec .cs-split + .cs-pair, .cs-sec .cs-split + .cs-three{margin-top:16px;}
.vrow{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.vrow.vrow3{grid-template-columns:repeat(3,1fr);}
.cs-more{font-size:.95rem; color:var(--charcoal-soft);}
.cs-more a{color:var(--charcoal); text-decoration:underline;}
@media (max-width:640px){.vrow{grid-template-columns:1fr 1fr; gap:12px;} .vrow.vrow3{grid-template-columns:1fr 1fr;}}
.wcard .img.has-photo{display:block; padding:0; overflow:hidden;}
.wcard .img.has-photo img{display:block; width:100%; height:100%; object-fit:cover;}
/* No dragging, saving previews or highlight on content pieces (photos, videos, cards) */
img, video, .ph-media, .wcard, .bts-tile, .scard, .pscard{-webkit-user-drag:none; user-drag:none;}
.ph-media, .ph-media img, .wcard, .wcard img, .bts-tile, .bts-tile img{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
/* Lift for photos and tiles that do not link anywhere, same float as the gallery cards (hover on desktop, press on touch) */
.cs .mo-item.lift{position:relative;}
.cs .ph-media.lift{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
@media(hover:hover){
  html .cs .ph-media.lift:hover, html .cs .mo-item.lift:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2;}
}
html .cs .ph-media.lift.hold, html .cs .mo-item.lift.hold{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2;}
/* One photo spacing for every project page: 28px between stacked items. Titled sections sit 40px apart. */
.cs{gap:28px;}
.cs > .cs-sec{margin-top:12px;}
.cs > .yt-note + .cs-meta{margin-top:-14px;}
.svc-body .svc-pair{font-size:.88rem; color:var(--charcoal-soft); margin:12px 0 18px;}
.svc-pair a{color:var(--charcoal); font-weight:600; text-decoration:underline; white-space:nowrap;}
.cs-sec.cs-gal > * + *{margin-top:28px;}
.cs-sec.cs-gal > .cs-blurb + *{margin-top:0;}
.cs-sec.cs-gal > h4 + .cs-blurb{margin-top:0;}
.cs-camp{display:flex; flex-direction:column; gap:28px; margin-top:44px;}
.cs-mix{display:grid; grid-template-columns:256fr 81fr; gap:28px; align-items:start;}
.vrow.vrow5{grid-template-columns:repeat(5,1fr); gap:14px;}
@media(max-width:640px){ .vrow.vrow5{grid-template-columns:1fr 1fr; gap:12px;} .vrow.vrow5 > :last-child:nth-child(odd){grid-column:1/-1; width:calc(50% - 6px); justify-self:center;} }
@media(max-width:900px){ .vrow.vrow5{grid-template-columns:repeat(2,1fr);} }
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-bottom:12px;}
.svc-card{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(58,60,53,.12); display:flex; flex-direction:column;}
.svc-thumb{aspect-ratio:4/3; overflow:hidden; background:#0d0d0d;}
.svc-strip{display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; gap:3px;} .svc-strip img:first-child{grid-row:1/3;} .svc-thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.svc-thumb.svc-dpcrop img{object-position:50% 0;}
@media(min-width:700px){.svc-thumb.svc-dpcrop img{transform:scale(1.22); transform-origin:6% 3%;}}
.svc-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex-grow:1;}
.svc-body h4{font-size:1.45rem; font-weight:800; line-height:1.2; margin:0 0 10px; letter-spacing:-.01em;}
.cs h4, .cs-sec h4{font-family:'Source Sans 3',sans-serif;}
.cs > div > h4{font-size:2.05rem; font-weight:800; line-height:1.15; margin:0 0 10px; letter-spacing:-.01em;}
.cs > div > h4::before{content:""; display:block; width:48px; height:4px; border-radius:2px; background:var(--orange); margin-bottom:14px;}
.step-body h4, .wcard h4, .scard h4, .pscard h4, .psrows .pscard h4{font-family:'Source Sans 3',sans-serif; font-weight:800; letter-spacing:-.01em;}
.step-body h4{font-size:1.7rem;} .wcard h4{font-size:1.3rem;} .scard h4, .pscard h4, .psrows .pscard h4{font-size:1.3rem;}
@media(max-width:700px){.cs > div > h4{font-size:1.65rem;} .svc-body h4{font-size:1.3rem;} .step-body h4{font-size:1.45rem;} .wcard h4, .scard h4, .pscard h4{font-size:1.2rem;}}
.svc-body p{font-size:.92rem; color:var(--charcoal-soft); margin:0; line-height:1.55;}
.svc-body .svc-link{margin-top:auto; align-self:flex-start;}
.svc-body .svc-link + .svc-link{margin-top:10px;}
.svc-body .svc-list{margin-bottom:14px;}
.svc-plain{background:#f1ece2; box-shadow:none;}
@media(min-width:700px){.svc-grid > .svc-card:last-child:nth-child(odd){grid-column:1/-1; flex-direction:row;} .svc-grid > .svc-card:last-child:nth-child(odd) .svc-thumb{flex:1 1 50%; height:auto; min-height:230px; aspect-ratio:auto;} .svc-grid > .svc-card:last-child:nth-child(odd) .svc-body{flex:1 1 50%; justify-content:center;} .svc-grid > .svc-card:last-child:nth-child(odd) .svc-body .svc-link{margin-top:14px;} .svc-grid > .svc-card:last-child:nth-child(odd) .svc-body .svc-link + .svc-link{margin-top:10px;} .svc-grid > .svc-card.svc-plain:last-child:nth-child(odd) .svc-body{flex:1 1 100%;}}
.svc-lede{font-size:1rem; color:var(--charcoal-soft); max-width:none; margin:0 0 36px;}
.svc-grid > .svc-card.svc-wide{grid-column:1/-1;}
@media(min-width:700px){.svc-grid > .svc-card.svc-wide{flex-direction:row;} .svc-grid > .svc-card.svc-wide .svc-thumb{flex:1 1 50%; height:auto; min-height:230px; aspect-ratio:auto;} .svc-grid > .svc-card.svc-wide .svc-body{flex:1 1 50%; justify-content:center;}}
#svc-intro{margin-bottom:12px !important; max-width:none;} .svc-lede{max-width:none; margin-bottom:34px;} .svc-also a,.svc-bundle a{color:var(--charcoal); text-decoration:underline; text-underline-offset:3px; font-weight:600;} .svc-also a:hover,.svc-bundle a:hover{opacity:.7;}
@media(min-width:1000px){
 #page-service-detail > .section{max-width:1100px !important;}
 #page-service-detail > .section:has(.svc-grid-few){max-width:860px !important;}
 .svc-grid-few{grid-template-columns:repeat(2,1fr);}
 .svc-grid:not(.svc-grid-few){grid-template-columns:repeat(3,1fr);}
 .svc-grid:not(.svc-grid-few) > .svc-plain{grid-column:1/-1;}
}

.svc-list{margin:12px 0 0; padding-left:18px; font-size:0.9rem; color:var(--charcoal-soft); line-height:1.6;}
.svc-link{display:inline-block; margin-top:14px; font-weight:700; font-size:0.9rem; color:var(--charcoal); text-decoration:none; border-bottom:1.5px solid var(--orange);}
.svc-also{font-size:0.9rem; color:var(--charcoal-soft); margin:10px 0 0; max-width:none;}
.svc-solo{margin-bottom:34px; max-width:560px;}
.svc-duo{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.svc-duo .vtile{min-width:0;}
.svc-media{min-width:0;}
@media(max-width:820px){ .svc-row{gap:22px !important;} }

.cs-bts{display:flex; flex-direction:column; gap:10px;}
.cs-bts-row{display:flex; gap:10px;}
.cs-bts .ph-media{margin:0; flex:var(--ar) 1 0; min-width:0;}
.cs-bts .ph-media img{width:100%; height:100%; object-fit:cover; display:block;}
@media(max-width:700px){.cs-bts{flex-direction:row; flex-wrap:wrap; gap:8px;} .cs-bts-row{display:contents;} .cs-bts .ph-media{order:var(--mo);} .cs-bts .ph-media.bl{flex:1.5 1 calc(1.5 * 100px);} .cs-bts .ph-media.bp{flex:0.6667 1 calc(0.6667 * 230px);}}
.cs-masonry{display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:10px; aspect-ratio:1/1;}
.cs-masonry .ph-media{margin:0; aspect-ratio:auto; height:100%; width:100%;}
.cs-masonry .ph-media img{width:100%; height:100%; object-fit:cover; display:block;}
.cs-masonry .ph-media:nth-child(1){grid-column:span 2; grid-row:span 2;}
.cs-masonry .ph-media:nth-child(3){grid-row:span 2;}
.cs-masonry .ph-media:nth-child(6){grid-column:span 2; grid-row:span 2;}
.cs-split{display:flex; gap:28px; align-items:center;} .cs-split > .ph-media{flex:0 0 min(340px,38%); margin:0;} .cs-split-side{flex:1; display:flex; flex-direction:column; gap:14px;}
.cs-fact{padding:18px 20px; border-radius:12px; background:rgba(0,0,0,.035); border-left:3px solid #ff930a;} .cs-fact h5{margin:0 0 4px; font-size:1.05rem;} .cs-fact p{margin:0; font-size:.98rem; line-height:1.5;}
@media(max-width:700px){ .cs-split{flex-direction:column; align-items:stretch; gap:14px;} .cs-split > .ph-media{flex:none; width:100%; max-width:340px; margin:0 auto;} .cs-fact{padding:14px 16px;} }
.cs-mosaic-grid{column-count:auto; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:dense; gap:12px;} .cs-mosaic-grid .mo-item{margin:0; position:relative; aspect-ratio:2/3;} .cs-mosaic-grid .mo-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .cs-mosaic-grid .mo-w{grid-column:span 2; aspect-ratio:auto;} .cs-mosaic-grid .mo-m{display:none;} @media(max-width:700px){.cs-mosaic-grid{grid-template-columns:repeat(2,1fr); gap:10px;} .cs-mosaic-grid .mo-w{aspect-ratio:4/3;} .cs-mosaic-grid .mo-m{display:block;}}
.cs-gal .cs-mosaic + .cs-mosaic{margin-top:0;}
.cs-just{margin-top:10px; display:flex; flex-direction:column; gap:10px;} .cs-jrow{display:flex; gap:10px;} .cs-just .ph-media{margin:0; aspect-ratio:auto; min-width:0;} .cs-just .ph-media img{width:100%; height:100%; object-fit:cover; display:block;}
.cs-life{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(6,1fr); gap:10px; aspect-ratio:1.11/1; margin-top:14px;}
.cs-life .ph-media{margin:0; aspect-ratio:auto; height:100%; width:100%;} .cs-life .ph-media img{width:100%; height:100%; object-fit:cover; display:block;}
.cs-life .ph-media:nth-child(1){grid-area:1/1/4/2;} .cs-life .ph-media:nth-child(3){grid-area:4/1/7/2;}
.cs-life .ph-media:nth-child(2){grid-area:1/2/3/3;} .cs-life .ph-media:nth-child(4){grid-area:3/2/5/3;} .cs-life .ph-media:nth-child(5){grid-area:5/2/7/3;}
.cs-life .ph-media:nth-child(6){grid-area:1/3/4/4;} .cs-life .ph-media:nth-child(7){grid-area:4/3/7/4;}
@media(max-width:700px){ .cs-just,.cs-jrow{gap:6px;} .cs-life{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(9,1fr); gap:6px; aspect-ratio:.494/1;}
 .cs-life .ph-media:nth-child(1){grid-area:1/1/4/2;} .cs-life .ph-media:nth-child(3){grid-area:4/1/7/2;} .cs-life .ph-media:nth-child(6){grid-area:7/1/10/2;}
 .cs-life .ph-media:nth-child(7){grid-area:1/2/4/3;} .cs-life .ph-media:nth-child(2){grid-area:4/2/6/3;} .cs-life .ph-media:nth-child(4){grid-area:6/2/8/3;} .cs-life .ph-media:nth-child(5){grid-area:8/2/10/3;} }
@media(max-width:700px){ .cs-masonry{gap:6px;} }
@media(max-width:700px){ .cs-mix{grid-template-columns:1fr;} .cs-mix .ph-media:nth-child(2){width:62%; margin:0 auto;} }
.cs-camp:first-child{margin-top:0;}
@media(max-width:700px){.cs-mosaic .mo-d{display:none;}}
.cs-sub{margin-top:36px;} .cs-sub > h5{font-size:1.25rem; line-height:1.2; margin:0 0 8px;} .cs-sub > .cs-blurb{margin:0 0 20px;}
/* Video wrappers: no clipping, transform or filter on the box that holds a playing video (iOS Safari can play the sound and leave the picture on the poster when a video sits in a clipped, rounded, animated box). The radius moves onto the video itself. */
.ph-media.ph-vid{overflow:visible; isolation:isolate;}
.ph-media.ph-vid.reveal, .ph-media.ph-vid.reveal.visible, .ph-media.ph-vid.reveal.settled, .ph-media.ph-vid.hold, .ph-media.ph-vid:hover{transform:none !important; filter:none !important; box-shadow:none !important; will-change:auto !important;}
.ph-media.ph-vid.reveal{transition:opacity .5s ease !important;}
.ph-media.ph-vid > .tap-play{border-radius:inherit; z-index:2;}
.ph-media.ph-vid > video{display:block; width:100%; height:100%; border-radius:inherit; background:#000;}
.svc-card{transition:transform .09s ease-out, box-shadow .09s ease-out; scroll-margin-top:96px;}
@media(hover:hover){ .svc-card:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.12);} }
.svc-card.hold{transform:translateY(-8px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.12);}
.cs-svcs{margin-top:64px; padding-top:28px; border-top:1px solid var(--line); text-align:center;} .cs-svcs h3{font-size:1.15rem; margin:0 0 14px;}
.cs-svcs-groups{display:flex; flex-direction:column; gap:20px; max-width:820px; margin:0 auto;}
.cs-svc-group{display:flex; flex-direction:column; align-items:center; gap:10px;}
.cs-svc-cat{font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal-soft);}
.cs-svc-pills{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
a.cs-svc{display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; background:#fff; border:1px solid var(--line); border-radius:999px; color:var(--charcoal); font-size:.95rem; font-weight:600; text-decoration:none; transition:transform .09s ease-out, box-shadow .09s ease-out;}
@media(hover:hover){ a.cs-svc:hover{transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.1);} }
.cs-svcs p{font-size:.92rem; color:var(--charcoal-soft); margin:20px 0 0;}
.svc-bundle{font-size:1rem;}
.cs-camp-band{display:flex; align-items:center; gap:14px; background:var(--charcoal); color:var(--cream); padding:12px 18px; border-radius:6px; margin-bottom:8px;}
.cs-camp-n{font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--orange);} .cs-camp-rule{flex:1; height:1px; background:rgba(250,247,242,.28);}
.cs-camp{margin-top:96px !important;} .cs-jump + .cs-camp{margin-top:48px !important;}
.cs-swipe{display:none;}
@media(max-width:700px){ .cs-camp{margin-top:72px !important;} .cs-jump + .cs-camp{margin-top:40px !important;}
  .cs-sec.cs-gal > .cs-swipe, .cs-swipe{display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0 4px !important; font-size:.85rem; font-weight:600; letter-spacing:.04em; color:var(--charcoal-soft);} .cs-swipe svg{color:var(--orange); animation:cs-nudge 1.6s ease-in-out infinite;} }
@keyframes cs-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
@media(prefers-reduced-motion:reduce){.cs-swipe svg{animation:none;}}

.cs-camp > .cs-sec{margin-top:12px;}

/* Rap Living: series stats strip and the running order of a night */
.cs-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 30px;}
.cs-stat{padding:16px 18px; border-radius:12px; background:rgba(0,0,0,.035); border-left:3px solid var(--orange);}
.cs-stat strong{display:block; font-size:1.7rem; font-weight:900; line-height:1.1; color:var(--charcoal);}
.cs-stat span{display:block; margin-top:4px; font-size:.88rem; line-height:1.35; color:var(--charcoal-soft);}
.cs-run{display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; padding:0; margin:18px 0 0;}
.cs-run li{border-radius:999px; padding:7px 12px; font-size:.85rem; font-weight:700; line-height:1.2;}
.cs-run .run-head{background:var(--charcoal); color:var(--cream);}
.cs-run .run-head b{margin-left:6px; color:var(--orange);}
.cs-run .run-more{padding:7px 4px; font-size:1.1rem; color:var(--charcoal-soft);}
.cs-run .run-mic{border:1.5px dashed var(--charcoal-soft); color:var(--charcoal-soft); font-size:.8rem; font-weight:600;}
@media(max-width:700px){ .cs-stats{grid-template-columns:1fr 1fr; gap:10px;} .cs-stat strong{font-size:1.4rem;} .cs-run li{padding:7px 11px;} }

/* photos that are still loading or failed to load: a quiet tile, never alt text or a broken icon */
.cs-mosaic .mo-item, .cs-just .ph-media{background-color:rgba(0,0,0,.06);}
.cs img, .cs-camp img, .wcard img{color:transparent;}
img.img-failed{visibility:hidden;}
.cs-just .ph-media img.img-failed{min-height:120px;}

/* placeholder notes never force a column wider than the screen */
.ph-note{overflow-wrap:anywhere; min-width:0;}
/* Inquiry sent: slate clap overlay (built in js/app.js playSlate) */
.slate-fx{position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; z-index:10000; background:#242520; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:16px; cursor:pointer; animation:sfxOut .42s cubic-bezier(.7,0,.2,1) 1.2s forwards;}
.sfx-flash{position:absolute; inset:0; background:var(--cream); opacity:0; pointer-events:none; animation:sfxFlash .4s ease-out .36s;}
.sfx-slate{position:relative; width:min(320px,82vw); animation:sfxIn .22s cubic-bezier(.2,.8,.2,1) both;}
.sfx-stick, .sfx-bar{height:34px; box-sizing:border-box; border:3px solid var(--cream);}
.sfx-stick{border-radius:5px 5px 0 0; background:repeating-linear-gradient(-55deg, var(--cream) 0 20px, var(--orange) 20px 40px); transform-origin:5px 100%; transform:rotate(-32deg); animation:sfxClap .2s cubic-bezier(.6,0,1,1) .16s forwards;}
.sfx-bar{margin-top:2px; background:repeating-linear-gradient(55deg, var(--cream) 0 20px, var(--orange) 20px 40px);}
.sfx-board{background:var(--charcoal); border:3px solid var(--cream); border-top:none; border-radius:0 0 8px 8px; padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; font-family:'Permanent Marker','Source Sans 3',cursive; color:var(--cream); font-size:18px; line-height:1.25; text-transform:uppercase;}
.sfx-row{display:flex; align-items:baseline; gap:8px; min-width:0; border-bottom:1px solid rgba(250,247,242,.28); padding-bottom:7px;}
.sfx-row:last-child{border-bottom:none; padding-bottom:0; justify-content:space-between;}
.sfx-k{font-family:'Source Sans 3',sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em; opacity:.7; flex:none;}
.sfx-v{min-width:0; flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.sfx-n{flex:none; color:var(--orange); font-family:'Source Sans 3',sans-serif; font-weight:900; font-size:20px;} .sfx-r{flex:none; text-align:right;}
.sfx-word{font-weight:900; font-size:clamp(48px,14vw,72px); letter-spacing:.04em; line-height:1; color:var(--orange); opacity:0; animation:sfxWord .26s cubic-bezier(.2,1.5,.4,1) .38s forwards;}
@keyframes sfxIn{from{transform:scale(.8); opacity:0} to{transform:none; opacity:1}}
@keyframes sfxClap{0%{transform:rotate(-32deg)} 70%{transform:rotate(0)} 85%{transform:rotate(-5deg)} 100%{transform:rotate(0)}}
@keyframes sfxFlash{0%{opacity:.85} 100%{opacity:0}}
@keyframes sfxWord{from{opacity:0; transform:scale(2.2)} to{opacity:1; transform:none}}
@keyframes sfxOut{to{transform:translateY(-100%)}}
/* True mosaic (Rap Living): big, tall, wide and small tiles packed with no gaps. Row height follows the column width. */
.cs-mos-wrap{container-type:inline-size;}
.cs-mos{column-count:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:150px; grid-auto-rows:calc((100cqw - 36px) / 4 * .8); grid-auto-flow:dense; gap:12px;}
.cs-mos .mo-item{margin:0; position:relative;} .cs-mos .mo-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cs-mos .mo-big{grid-column:span 2; grid-row:span 2;} .cs-mos .mo-tall{grid-row:span 2;} .cs-mos .mo-wide{grid-column:span 2;}
@media(max-width:700px){ .cs-mos{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:120px; grid-auto-rows:calc((100cqw - 10px) / 2 * .8); gap:10px;} }
/* Service pages: the bundle/retainer note sits right under the intro, short, so it is seen before the service list */
.svc-bundle.svc-top{font-size:.95rem; color:var(--charcoal-soft); margin:0 0 34px; padding:12px 16px; background:rgba(255,147,10,.08); border-radius:8px; max-width:none;}
/* Service cards: one compact "Seen in" row of case study chips instead of stacked "See the ..." links */
.svc-seen{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px;}
.svc-body .svc-seen{margin-top:auto; padding-top:16px;}
.svc-seen-l{flex-basis:100%; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal-soft);}
.svc-seen a{display:inline-flex; align-items:center; min-height:34px; padding:0 13px; border:1.5px solid var(--line); border-radius:999px; font-size:.84rem; font-weight:700; color:var(--charcoal); text-decoration:none; background:#fff; transition:border-color .15s ease, background .15s ease;}
@media(hover:hover){ .svc-seen a:hover{border-color:var(--orange); background:rgba(255,147,10,.08);} }
.svc-seen a:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
.svc-seen a.svc-seen-all{border-color:transparent; background:none; padding:0 4px; color:var(--charcoal); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:4px; text-decoration-thickness:1.5px;}
@media(hover:hover){ .svc-seen a.svc-seen-all:hover{background:none; border-color:transparent; color:var(--orange);} }

/* timeline layout for photo-only event stories (Tide Film Fest) */
.cs-tl{margin-top:44px;}
.cs .tl-step{position:relative; margin:0 0 0 6px; padding:0 0 48px 30px; border-left:2px solid var(--line);}
.cs .tl-step:last-child{border-left-color:transparent; padding-bottom:0;}
.tl-step::before{content:""; position:absolute; left:-8px; top:3px; width:14px; height:14px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px var(--cream);}
.tl-k{font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin-bottom:4px; line-height:1.2;}
.tl-step > h4{margin-top:0;}
.tl-step > .ph-media + .cs-mos-wrap{margin-top:16px;}
@media(max-width:700px){ .cs .tl-step{padding-left:20px; margin-left:4px; padding-bottom:40px;} }

/* L.O.C Astrology: labelled deliverables and the twelve sign grid */
.loc-del{margin:0; min-width:0;} .loc-del .ph-media{margin:0;}
.loc-del-l{margin:10px 0 0; font-size:.92rem; font-weight:600; color:var(--charcoal);} .loc-del-l b{color:var(--orange); margin-right:8px; letter-spacing:.06em;}
.loc-signs{display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
.loc-sign{margin:0;} .loc-sign .ph-media{margin:0;}
.loc-sign figcaption{margin-top:7px; font-size:.82rem; font-weight:600; color:var(--charcoal-soft); text-align:center; letter-spacing:.02em;}
.loc-sign figcaption span{color:var(--orange); margin-right:2px;}
@media(max-width:700px){ .loc-signs{grid-template-columns:repeat(3,1fr); gap:10px;} }
.cs-sec .cs-three + .cs-pair, .cs-sec .cs-pair + .cs-three{margin-top:12px;}
/* About page photos float like the project photos (hover on desktop, press on touch) */
#page-about .row2 .ph-media.lift{position:relative; transition:transform .12s ease-out, box-shadow .12s ease-out; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
@media(hover:hover){ html #page-about .row2 .ph-media.lift:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2;} }
html #page-about .row2 .ph-media.lift.hold{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2;}
/* Contact: handshake photo between the form and the reviews */
#page-contact .contact-photo{max-width:560px; margin:44px auto 0; aspect-ratio:16/9; overflow:hidden; border-radius:10px;}
#page-contact .contact-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 55%;}
/* Parties: the kinds of celebrations covered, as a wrap of tags above the collage */
.party-tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 34px; padding:0;}
.party-tags li{border:1.5px solid var(--line); background:var(--white); border-radius:999px; padding:7px 14px; font-size:.86rem; font-weight:600; color:var(--charcoal);}
/* Services: "Jump to a service" menu. Closed: one line (sticky on phones, showing the card you are on). Open: the full list. */
.svc-jump{position:relative; margin:0 0 26px; max-width:520px;}
.svc-jump-btn{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:10px 16px; background:var(--white); border:1.5px solid var(--line); border-radius:12px; font:inherit; font-size:.92rem; font-weight:700; color:var(--charcoal); cursor:pointer; text-align:left; transition:border-color .15s ease;}
.svc-jump-btn:hover, .svc-jump.open .svc-jump-btn{border-color:var(--charcoal);}
.svc-jump-l{flex:none;}
.svc-jump-now{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--charcoal-soft);}
.svc-jump.has-now .svc-jump-l{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--orange);}
.svc-jump.has-now .svc-jump-l::after{content:":";}
.svc-jump-chev{flex:none; margin-left:auto; color:var(--orange); transition:transform .2s ease;}
.svc-jump.open .svc-jump-chev{transform:rotate(180deg);}
.svc-jump-list{list-style:none; margin:8px 0 0; padding:8px; background:var(--white); border:1.5px solid var(--line); border-radius:12px; box-shadow:0 14px 30px rgba(58,60,53,.12); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(var(--rows,7),auto); grid-auto-flow:column; gap:2px 6px; position:absolute; left:0; right:0; top:100%; z-index:45;}
.svc-jump-list[hidden]{display:none;}
/* open and close like an accordion: the panel unfolds from the bar downward and folds back up into it */
.svc-jump-list{clip-path:inset(-20px -40px 100% -40px); opacity:0; transform:translateY(-8px); transition:clip-path .34s cubic-bezier(.4,0,.2,1), opacity .26s ease, transform .34s cubic-bezier(.4,0,.2,1);}
.svc-jump-list.show{clip-path:inset(-20px -40px -60px -40px); opacity:1; transform:none;}
.svc-jump-list li{opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease;}
.svc-jump-list.show li{opacity:1; transform:none; transition-delay:calc(60ms + var(--i,0) * 18ms);}
@media (prefers-reduced-motion:reduce){ .svc-jump-list, .svc-jump-list li{transition:none !important;} }
.svc-jump-list a{display:block; padding:10px 12px; border-radius:8px; font-size:.9rem; font-weight:600; color:var(--charcoal); text-decoration:none;}
.svc-jump-list a:hover{background:var(--cream);}
.svc-jump-list a.on{color:var(--orange);}
#svc-sections .svc-card[id], #svc-sections [id]{scroll-margin-top:96px;}
@media(max-width:700px){
  .svc-jump{position:sticky; top:calc(var(--svc-jump-top,0px) + 10px); z-index:40; max-width:none; margin:0 0 22px; padding:0; background:none; border:0; transition:top .25s ease;}
  .svc-jump .svc-jump-btn{border-radius:16px; border-color:#D7D7D6; transition:border-color .15s ease, box-shadow .25s ease;}
  .svc-jump.stuck .svc-jump-btn{box-shadow:0 6px 18px rgba(58,60,53,0.13);}
  .svc-jump-list{left:0; right:0; padding:6px; gap:2px 4px; border-radius:16px; border-color:#D7D7D6;}
  .svc-jump-list a{display:flex; align-items:center; height:100%; box-sizing:border-box; padding:9px 9px; font-size:.82rem; line-height:1.25;}
  #svc-sections .svc-card[id], #svc-sections [id]{scroll-margin-top:76px;}
}
/* Two vertical videos side by side inside a split, with the facts beside them */
.cs-split > .cs-split-vids{flex:0 0 min(560px,56%); display:grid; grid-template-columns:1fr 1fr; gap:12px;} .cs-split-vids .ph-media{margin:0;}
@media(max-width:700px){ .cs-split > .cs-split-vids{flex:none; width:100%;} }
/* A video can sit in a mosaic as a tall tile, filling it like the photos */
.cs-mos .mo-item.ph-vid{aspect-ratio:auto; height:auto; margin:0;} .cs-mos .mo-item.ph-vid video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* Split where the photos beside a vertical video stretch to match its height */
@media(min-width:701px){ .cs-split.cs-fill{align-items:stretch;} .cs-split.cs-fill > .cs-split-side{gap:12px;} .cs-split.cs-fill > .cs-split-side > .ph-media{flex:1 1 0; aspect-ratio:auto !important; min-height:0; margin:0;} }
.cs-split + .cs-more{margin-top:16px;}
/* Footer signup: one line on what people get */
.foot-promise{margin:-8px 0 14px; font-size:.86rem; line-height:1.5; color:rgba(250,247,242,.72); max-width:none;}
@media(max-width:860px){ .foot-promise{order:6; margin:-8px 0 12px;} }
/* stacked photo blocks inside a section keep the grid gap between them */
.cs-sec > :is(.ph-media,.cs-pair,.cs-three,.cs-four) + :is(.ph-media,.cs-pair,.cs-three,.cs-four,.cs-split,.cs-mos-wrap){margin-top:12px;}
.cs-sec .cs-split + .cs-four{margin-top:16px;}
@media(max-width:350px){ .foot-promise{font-size:.74rem;} }
.foot-eyebrow .foot-nospam{color:rgba(250,247,242,.6); white-space:nowrap;}
.cs-svcs:not(.cs-svcs-open) a.cs-svc-more{display:none;}
.cs-svc-toggle{margin:18px auto 0; display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; background:none; border:1px dashed var(--line); border-radius:999px; color:var(--charcoal); font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;}
.cs-svc-toggle:hover{border-color:var(--orange); color:var(--orange);}
/* 3 per row on desktop: a last card that completes a row of three stays a normal card */
@media(min-width:1000px){ .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n){grid-column:auto; flex-direction:column;} .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n) .svc-thumb{flex:none; height:auto; min-height:0; aspect-ratio:4/3;} .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n) .svc-body{flex:1 1 auto; justify-content:flex-start;} }
/* highlight for a service card reached from the jump menu or a #link */
@keyframes svc-flash{0%{box-shadow:0 0 0 0 rgba(255,147,10,0); border-color:var(--line);} 20%{box-shadow:0 0 0 4px rgba(255,147,10,.55), 0 12px 28px rgba(0,0,0,.12); border-color:var(--orange);} 100%{box-shadow:0 0 0 0 rgba(255,147,10,0); border-color:var(--line);}}
.svc-card.svc-flash{animation:svc-flash 1.6s ease-out;}
@media(prefers-reduced-motion:reduce){ .svc-card.svc-flash{animation:none; outline:3px solid var(--orange); outline-offset:2px;} }
/* smooth hover fades on links and buttons that changed instantly */
.navlinks a, .shop-btn, .cta, .cta-outline, .rbadge, .rbadge span, .rmeta, .foot-review a, .svc-bundle a, .svc-also a, .cs-svc-toggle{transition:color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease, text-decoration-color .2s ease;}
/* facts as a row above a gallery */
.cs-facts-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;}
@media(max-width:700px){ .cs-facts-row{grid-template-columns:1fr; gap:10px;} }
/* logo carousel: fade the logos themselves at the edges (works on any background, no overlay) */
.trusted-marquee{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);}
.trusted-marquee::before,.trusted-marquee::after,#page-home .strip .trusted-marquee::before,#page-home .strip .trusted-marquee::after{display:none;}
@media(max-width:600px){ .trusted-marquee{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);} }
@media(prefers-reduced-motion:reduce){ .trusted-marquee{-webkit-mask-image:none; mask-image:none;} }
/* "Trusted by" strip: heading and logo carousel fade in together, opacity only, so the sliding logos never jump */
.strip .reveal{transform:none !important;}
.strip .trusted-marquee.reveal{transition:opacity .7s ease;}
/* hide page content for the moment before app.js sets up the fades, so text never flashes then fades */
html.pre .page{visibility:hidden;}
/* opening text on every page: pure fade, like the home hero */
.reveal.intro{transform:none !important;}
/* while the page is being set up, fade elements jump straight to hidden instead of fading out first */
html.pre .reveal{transition:none !important;}
html.pre .page .ph-media.ph-vid.reveal{transition:none !important;}
/* section blurbs are dimmed text, but still start hidden until their fade */
.cs-sec .cs-blurb.reveal:not(.visible){opacity:0;}
/* services overview on phones: keep "Photography →" inside its card */
@media(max-width:480px){ .scard{padding:22px 16px;} .scard h4{font-size:1.06rem;} }
/* if the page had to be shown before the script was ready, show everything plainly instead of hiding it again */
html.noanim .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
/* photo frames wait in a soft neutral instead of black, and photos fade in when they arrive (video frames stay dark) */
.ph-media:not(.ph-vid), .svc-thumb{background:#ECE8E0;}
.cs-mos .mo-item:not(.ph-vid){background:#ECE8E0;}
img.img-wait{opacity:0;}
.ph-media img, .svc-thumb img, .mo-item img, .wcard .img img, .about img{transition:opacity .35s ease;}
@media(prefers-reduced-motion:reduce){ img.img-wait{opacity:1;} }
/* home hero line: "NYC" on phones so "beyond." doesn't sit alone */
.nyc-m{display:none;}
@media(max-width:700px){ .nyc-d{display:none;} .nyc-m{display:inline;} }
#page-home .hero h1{text-wrap:balance;}
/* Mobile footer, three tiers: 1 signup, 2 brand (logo, email, socials), 3 small print (pages, review link, legal) */
@media(max-width:860px){
  footer .foot-eyebrow{order:1; margin-top:0;}
  footer .foot-promise{order:2;}
  footer .subscribe{order:3;}
  footer .sub-msg, footer .sub-thanks{order:4;}
  footer .foot-logo{order:5; margin-top:40px;}
  footer .foot-logo img{height:28px;}
  footer .foot-brand > .foot-email-l, footer .foot-email-r{order:6; margin-top:6px; font-size:.95rem;}
  footer .foot-email-l *, footer .foot-email-r *{margin-top:0;}
  footer .foot-social{order:7; margin-top:14px;}
  footer .foot-nav{order:8; margin-top:34px; padding-top:22px; border-top:1px solid rgba(250,247,242,.14); font-size:.95rem; opacity:.85;}
  footer .foot-review-row{order:9; margin-top:18px; display:flex; justify-content:center;}
  html footer .foot-links span.foot-review{border:none; background:none; padding:0; font-size:.88rem; color:rgba(250,247,242,.7);}
  html footer .foot-links span.foot-review > a{padding:8px 4px; margin:-8px -4px; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px;}
  html footer .foot-links span.foot-review.hold, html footer .foot-links span.foot-review.tap-active{background:none; color:var(--orange);}
  footer .foot-bottom{margin-top:18px; border-top:none; padding-top:0;}
  footer .foot-legal a, footer .foot-bottom > span{font-size:.8rem;}
}
@media(max-width:360px){ footer .foot-nav{font-size:.84rem; gap:12px 6px;} footer .foot-icons{gap:0;} footer .foot-icons svg{width:22px; height:22px;} }
/* footer email reads as a link: mail icon + orange underline, orange on hover/tap */
footer .foot-email{display:inline-flex; align-items:center; gap:8px; color:rgba(250,247,242,.9); text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:1.5px; text-underline-offset:4px;}
footer .foot-email::before{content:""; flex:none; width:17px; height:17px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat;}
footer .foot-email:active, html footer .foot-email.hold{color:var(--orange);}
/* KNOT: each video carries its own label, with its description right under it */
.vid-tag{position:absolute; top:12px; left:12px; z-index:3; padding:5px 11px; border-radius:999px; background:rgba(43,45,39,.82); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; pointer-events:none;}
.knot-pair{align-items:flex-start;}
.knot-col{display:flex; flex-direction:column; gap:12px; flex:1; min-width:0;}
.knot-col .ph-media{margin:0;}
.knot-col-v{flex:0 0 min(340px,38%);}
@media(max-width:700px){ .knot-col-v{flex:none; width:100%; max-width:340px; margin:0 auto;} }
/* a card or video tile fades as one piece: anything inside it with its own fade just rides along */
.svc-card .reveal, .vtile .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
html.noanim .svc-card, html.noanim .vtile{opacity:1 !important;}
.cs-sec.cs-gal > .knot-cap{margin-top:10px;}
/* L.O.C sign cards fade as one piece (photo + caption) */
figure.loc-sign .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
/* opening (visit) fade is quicker than the scroll fade */
.reveal.intro{transition:opacity .45s ease !important;}
/* while a page is being set up nothing animates, so nothing flashes and fades back out */
html.pre .page *, html.pre .page *::before, html.pre .page *::after{transition:none !important;}
/* 3-photo service thumbnails: the two right-hand photos always split the height evenly */
.svc-strip{grid-template-rows:repeat(2,minmax(0,1fr));}
.svc-strip img{min-height:0; min-width:0; height:100%;}
.svc-thumb.svc-strip{contain:size;}
#retouching, #before-after, #ugc-content{scroll-margin-top:96px;}
.svc-list a.svc-inline{color:var(--charcoal); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px; white-space:nowrap; transition:color .2s ease;}
@media(hover:hover){ .svc-list a.svc-inline:hover{color:var(--orange);} }
/* headshots contact sheet */
.hs-sheet{margin:0 0 30px;} .hs-sheet img{display:block; width:100%; height:auto; border-radius:4px;} .hs-sheet figcaption{font-size:.85rem; color:var(--charcoal-soft); margin-top:10px;}
/* before / after slider inside a service card */
.svc-ba .ba{aspect-ratio:auto !important; height:100%; border:0; background:#111;}
/* podcast raw vs edited pair: keep the vertical clips from getting too tall */
.cs-pair.pod-ba{max-width:620px; margin-left:auto; margin-right:auto;}
/* desktop service grid: 6 tracks, each card spans 2, so a last row of 2 cards can share the row (span 3 each) and a last row of 1 card goes full width */
@media(min-width:1000px){
 .svc-grid:not(.svc-grid-few){grid-template-columns:repeat(6,1fr);}
 .svc-grid:not(.svc-grid-few) > .svc-card{grid-column:span 2;}
 .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n){grid-column:span 2;}
 .svc-grid:not(.svc-grid-few) > .svc-plain, .svc-grid:not(.svc-grid-few) > .svc-card.svc-wide{grid-column:1/-1;}
 .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n+2), .svc-grid:not(.svc-grid-few) > .svc-card:nth-last-child(2):nth-child(3n+1){grid-column:span 3; flex-direction:column;}
 .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n+2) .svc-thumb, .svc-grid:not(.svc-grid-few) > .svc-card:nth-last-child(2):nth-child(3n+1) .svc-thumb{flex:none; height:auto; min-height:0; aspect-ratio:16/9;}
 .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n+2) .svc-body{flex:1 1 auto; justify-content:flex-start;}
 .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n+1){grid-column:1/-1; flex-direction:row;}
 .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n+1) .svc-thumb{flex:1 1 50%; height:auto; min-height:230px; aspect-ratio:auto;}
 .svc-grid:not(.svc-grid-few) > .svc-card:last-child:nth-child(3n+1) .svc-body{flex:1 1 50%; justify-content:center;}
}
.hs-sheet .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
/* pause / play button on looping videos */
.loop-toggle{position:absolute; right:12px; bottom:12px; z-index:3; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:rgba(43,45,39,.72); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s;}
.loop-toggle:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
@media(hover:hover){ .loop-toggle:hover{background:rgba(43,45,39,.92);} }
video.loop{cursor:pointer;}
/* content placeholders: a media box with an icon and a short label for the piece still to come */
.ph-slot{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px; color:var(--charcoal-soft); font-size:.8rem; font-weight:600; letter-spacing:.02em; text-align:center; line-height:1.35;}
.ph-slot svg{flex:none; opacity:.6;}
.ph-slot.ph-vid{color:#cfc9bd;}
.ph-slot.ph-vid svg{opacity:.85;}
.cs-mos .mo-item > .ph-slot{position:absolute; inset:0; border-radius:0; aspect-ratio:auto;}
.cs-stat.ph-stat strong{color:var(--charcoal-soft); opacity:.55;}
.svc-thumb img.hs-fit{object-fit:contain;} /* the headshot grid is never cropped; the beige card background matches its border */
.svc-thumb picture{display:block; width:100%; height:100%;}
.cs-sec > :is(.ph-media,.cs-pair,.cs-three,.cs-four,.cs-mos-wrap,.cs-split,.vrow) + .cs-facts-row{margin-top:16px;}
/* before / after side by side in a service card thumbnail */
.svc-thumb.sf-ba{position:relative;}
.svc-thumb.sf-ba::after{content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px; background:#fff; pointer-events:none;}
.svc-thumb.sf-ba .ba-tag{z-index:1;}
@media(max-width:520px){ .svc-thumb.sf-ba .ba-tag{top:10px; padding:4px 9px; font-size:0.7rem;} .svc-thumb.sf-ba .ba-tag-l{left:10px;} .svc-thumb.sf-ba .ba-tag-r{right:10px;} }
/* podcast page: breathing room between the raw / edited pair and the motion graphics block */
.cs-sec > .cs-pair.pod-ba + .cs-split{margin-top:36px;}
.svc-pair br + a{display:inline-block; margin-top:8px;}
.cs-sec > .vgrid + .cs-more{margin-top:18px;}

/* ===== Wide desktop layout (1280px and up). Phones, tablets and laptops are unchanged. ===== */
/* project pages: one 1200px column, text left aligned with the media, slightly larger type */
@media(min-width:1280px){
 #page-project > section.section{max-width:1200px !important;}
 #page-project #proj-title{font-size:2.6rem;}
 #page-project #proj-desc{max-width:900px !important; font-size:1.12rem;}
 #page-project .cs-sec h4, #page-project .cs-camp > .cs-camp-title{font-size:2.3rem;}
 #page-project .cs-sec .cs-blurb, #page-project .cs-sub .cs-blurb, #page-project .cs-camp > .cs-blurb{max-width:860px; font-size:1.12rem;}
 #page-project .cs-meta{font-size:1.05rem;}
}

/* work grid: a short last row is centered instead of leaving empty cells (cards span 2 of 2N tracks) */
@media(min-width:521px){
 #work-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
 #work-grid .wcard{grid-column:span 2;}
 #work-grid .wcard:nth-child(2n+1):last-child{grid-column:2 / span 2;}
}
@media(min-width:821px){
 #work-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
 #work-grid .wcard:nth-child(2n+1):last-child{grid-column:span 2;}
 #work-grid .wcard:nth-child(3n+1):last-child{grid-column:3 / span 2;}
 #work-grid .wcard:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2;}
}
/* 4 across on wide screens */
@media(min-width:1400px){
 #work-tabs, #page-work .section-head, #page-work #work-desc{max-width:1440px !important;}
 #work-grid{max-width:1440px; grid-template-columns:repeat(8,minmax(0,1fr));}
 #work-grid .wcard:nth-child(3n+1):last-child, #work-grid .wcard:nth-child(3n+1):nth-last-child(2){grid-column:span 2;}
 #work-grid .wcard:nth-child(4n+1):last-child{grid-column:4 / span 2;}
 #work-grid .wcard:nth-child(4n+1):nth-last-child(2){grid-column:3 / span 2;}
 #work-grid .wcard:nth-child(4n+1):nth-last-child(3){grid-column:2 / span 2;}
}

/* homepage */
#home-teaser-grid > .wide-only{display:none;}
@media(min-width:1280px){
 #home-teaser-grid > .wide-only{display:block;}
 #page-home #home-teaser-grid{grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1360px;}
 #page-home .merged .mg-top{max-width:1360px; grid-template-columns:1fr 1.5fr;}
 #page-home .merged .mg-top .ba-wrap{max-width:none;}
 #page-home .psrows, #page-home .band-inner, #page-home .process-row, #page-home .testi{max-width:1360px;}
 #page-home .section-head h2, #page-home .band-title{font-size:2.6rem;}
 /* hero: centered, bigger headline and subheader (option A) */
 #page-home .hero-stage .hero.hero-over{max-width:1360px; width:100%;}
 #page-home .hero h1{font-size:5.6rem; line-height:1.02; max-width:1200px;}
 #page-home .hero .hero-side{max-width:900px; width:auto;}
 #page-home .hero .hero-side p{font-size:1.3rem; max-width:820px;}
}
@media(min-width:1280px){ #page-project .ba-wrap{max-width:none;} }
@media(min-width:1280px){ #page-home .hero .nyc-d{white-space:nowrap;} }
.ph-vid.sync-on video{cursor:pointer;} .ph-vid video[data-sync]{cursor:pointer;}
/* video before / after (one video, canvas split at the slider) */
.vba{position:relative; max-width:420px; margin:0 auto; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:#111; touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.vba video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none;}
.vba canvas{position:relative; display:block; width:100%; height:100%;}
.vba .ba-handle{position:absolute; top:50%; left:var(--pos); width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:#fff; color:var(--charcoal); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.35); z-index:3; cursor:ew-resize;}
.vba .vba-play{position:absolute; inset:0; z-index:2; background:transparent; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:none;}
.vba .vba-play .yt-btn{pointer-events:none;}
.vba.on .vba-play{display:none;}
.vba .ba-tag{z-index:2;}
.vba .ba-line{z-index:2;}
.vba .reveal{opacity:1 !important; transform:none !important;}
.vba .ba-handle{top:80%;} .vba .vba-play .yt-btn{top:46%;}
.cs-sec > .vba + .cs-split{margin-top:36px;}
/* podcasts before / after on desktop: before / after, motion graphics and the notes in one row */
@media(min-width:1000px){
 #before-after{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; align-items:start;}
 #before-after > h4, #before-after > .cs-blurb{grid-column:1 / -1;}
 #before-after > .vba{grid-column:1; grid-row:3; max-width:none; margin:0;}
 #before-after > .cs-split{display:contents;}
 #before-after > .cs-split > .ph-media{grid-column:2; grid-row:3; flex:none; width:auto; margin:0;}
 #before-after > .cs-split > .cs-split-side{grid-column:3; grid-row:3; align-self:center;}
}
@media(min-width:701px) and (max-width:999px){
 #before-after{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px;}
 #before-after > h4, #before-after > .cs-blurb{grid-column:1 / -1;}
 #before-after > .vba{grid-column:1; grid-row:3; max-width:none; margin:0;}
 #before-after > .cs-split{display:contents;}
 #before-after > .cs-split > .ph-media{grid-column:2; grid-row:3; flex:none; width:auto; margin:0;}
 #before-after > .cs-split > .cs-split-side{grid-column:1 / -1; grid-row:4; flex-direction:row; margin-top:16px;}
 #before-after > .cs-split > .cs-split-side > .cs-fact{flex:1;}
}
.cs-stat .cnt, .cs-fact .cnt, .ctafin-facts .cnt{display:inline-block; margin:0; font:inherit; font-variant-numeric:tabular-nums; line-height:inherit; color:inherit; letter-spacing:inherit; white-space:nowrap;}
.ctafin-facts .cnt::before{content:none !important;}
.ctafin-facts .flip{display:inline-block; white-space:nowrap; text-align:center; transition:width .25s ease; vertical-align:bottom; font-variant-numeric:tabular-nums;}
.ctafin-facts .flip::before{content:none !important;}
/* while counting, any spare width sits before the word, not between it and the text after it */
.ctafin-facts .cnt{text-align:right;}
.ctafin-facts .flip{text-align:right;}
/* odometer counters: an invisible copy of the final character holds the exact baseline, width and height; the strip floats over it */
x-odo, x-ch, x-ph, x-reel, x-g{font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; margin:0; padding:0; border:0; background:none;}
x-odo{display:inline; white-space:nowrap;}
x-ch{display:inline-block; position:relative; clip-path:inset(0); text-align:center; white-space:pre;}
x-ph{visibility:hidden; white-space:pre;}
x-reel{position:absolute; left:0; right:0; top:0; display:block; will-change:transform;}
x-reel > x-g{display:block; height:var(--h); line-height:var(--h); white-space:pre; text-align:center;}
/* phones: behind the scenes photos as a clean 2 column grid; landscapes stay 3:2, verticals stay 2:3, paired by shape (order set by --mo) */
@media(max-width:700px){
 .cs-bts:has(.cs-bts-row){display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
 .cs-bts:has(.cs-bts-row) .ph-media{flex:none !important; width:auto;}
 .cs-bts:has(.cs-bts-row) .ph-media.bl{aspect-ratio:3/2 !important;}
 .cs-bts:has(.cs-bts-row) .ph-media.bp{aspect-ratio:2/3 !important;}
 .cs-bts:has(.cs-bts-row) .cs-bts-row:first-child > .ph-media:first-child{grid-column:1 / -1;}
}
/* desktop: intro and section text run the full width of the column, ending where the photos and cards below end */
@media(min-width:1000px){
 #page-project #proj-desc, #page-project .cs-sec .cs-blurb, #page-project .cs-sub .cs-blurb, #page-project .cs-camp > .cs-blurb, #page-project .cs > .cs-meta, #page-project .cs-more{max-width:none !important;}
}

/* Pre-production treatment on a project page (Reject Dreams, Tan Seats): the scenes as a numbered list and the color palette */
.ts-page img{filter:saturate(1.05);}
.ts-scenes{list-style:none; counter-reset:ts; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:12px;}
@media(min-width:701px){ .ts-scenes{grid-template-columns:1fr 1fr;} }
@media(min-width:1000px){ .ts-scenes{grid-template-columns:repeat(4,1fr);} }
.ts-scenes li{counter-increment:ts; position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px 16px 56px; font-size:.95rem; line-height:1.55; color:var(--charcoal-soft);}
.ts-scenes li::before{content:counter(ts); position:absolute; left:16px; top:15px; width:26px; height:26px; border-radius:50%; background:var(--orange); color:#222; font-weight:800; font-size:.85rem; display:flex; align-items:center; justify-content:center;}
.ts-scenes b{display:block; color:var(--charcoal); font-size:1rem; margin-bottom:2px;}
.ts-palette{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap;}
.ts-palette-l{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-soft);}
.ts-sw{display:flex; border-radius:8px; overflow:hidden; border:1px solid var(--line);}
.ts-sw span{width:48px; height:30px;}
.ts-note{margin-top:14px; font-size:.95rem; color:var(--charcoal-soft);}
.ts-note a{color:var(--charcoal); font-weight:700;}

/* Desktop header laid out like the shop's: the logo in the middle, Contact and the bag on the right, the other pages on the left,
   in the same island size, so moving between this site and shop.skyvismedia.com feels like one site. */
.nav-right{display:none;}
@media(min-width:861px){
  header{padding:16px 18px 14px;} /* a gap under the island, like the shop */
  header nav{display:grid; grid-template-columns:1fr auto 1fr; min-height:80px; box-sizing:border-box; padding:12px clamp(24px,2.6vw,44px);}
  header nav .navlinks{grid-column:1; grid-row:1; justify-self:start;}
  header nav .navlinks a[data-p="contact"]{display:none;}
  header nav .navlinks{gap:clamp(22px,2.8vw,52px); font-size:clamp(1.05rem,0.6vw + 0.65rem,1.35rem);}
  header nav .logo{grid-column:2; grid-row:1; justify-self:center;}
  header nav .logo-wide{height:clamp(26px,2.5vw,40px) !important;}
  header nav .shop-btn{display:none;}
  header nav .nav-right{grid-column:3; grid-row:1; justify-self:end; display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); font-size:clamp(1.05rem,0.6vw + 0.65rem,1.35rem);}
  .nav-right a[data-p]{color:var(--charcoal-soft); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent;}
  .nav-right a[data-p].active, .nav-right a[data-p]:hover{color:var(--charcoal); border-bottom-color:var(--orange);}
  .nav-bag{display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-right:-8px; color:var(--charcoal);}
  .nav-bag svg{width:1.22em; height:1.22em; transform:translateY(-0.13em);} /* sized to the text; nudged up so the bag body centers on the letters */
  @media(hover:hover){ .nav-bag:hover{color:var(--orange);} }
}
/* the desktop header island is 110px tall with its gaps, so every jump target lands clear of it */
@media(min-width:861px){ html :is(#testimonials, #thanks-head, #form-thanks, .cs-camp, .svc-card, #svc-sections [id], #svc-sections .svc-card[id], #retouching, #before-after, #ugc-content, .cs-sec[id]){scroll-margin-top:126px;} }
/* desktop: the hero fills the rest of the first screen under the header (16 + 80 + 14px), so no strip of page shows below it */
@media(min-width:861px){ #page-home .hero-stage{min-height:max(520px, calc(100svh - 110px));} }
/* Headshots page samples: cut out of their backdrops, standing straight on the page with no frame, and not clickable */
.hs-cutouts .hs-cut{aspect-ratio:1; overflow:hidden;}
.hs-cutouts .hs-cut img{display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%;}
/* Work tabs: the outer corners of the whole set are rounded to match the header island */
.tabs{--tr:16px;}
@media(min-width:821px){ .tabs button:first-child{border-radius:var(--tr) 0 0 var(--tr);} .tabs button:last-child{border-radius:0 var(--tr) var(--tr) 0;} }
@media(max-width:820px) and (min-width:521px){ .tabs button:nth-child(1){border-top-left-radius:var(--tr);} .tabs button:nth-child(2){border-top-right-radius:var(--tr);} .tabs button:nth-child(5){border-bottom-left-radius:var(--tr);} .tabs button:nth-child(6){border-bottom-right-radius:var(--tr);} }
@media(max-width:520px){ .tabs{--tr:14px;} .tabs button:nth-child(1){border-top-left-radius:var(--tr);} .tabs button:nth-child(3){border-top-right-radius:var(--tr);} .tabs button:nth-child(4){border-bottom-left-radius:var(--tr);} .tabs button:nth-child(6){border-bottom-right-radius:var(--tr);} }
/* "Also available": an honorable mention panel under the service cards, two smaller offers side by side */
.svc-also-box{margin:56px auto 0; max-width:900px; padding:26px 28px 28px; border:1px solid var(--line); border-radius:18px; background:var(--white); box-shadow:0 10px 28px rgba(58,60,53,0.06); text-align:center;}
.svc-also-l{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:16px;}
.svc-also-items{display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left;}
.svc-also-item{display:block; padding:18px 20px; border-radius:12px; background:var(--cream); border:1px solid var(--line); color:inherit; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.svc-also-item h5{margin:0 0 6px; font-size:1.05rem; color:var(--charcoal);}
.svc-also-item p{margin:0; font-size:.92rem; line-height:1.5; color:var(--charcoal-soft);}
a.svc-also-item h5 span{color:var(--orange);}
@media(hover:hover){ a.svc-also-item:hover{transform:translateY(-3px); border-color:var(--charcoal); box-shadow:0 10px 20px rgba(0,0,0,0.08);} }
@media(max-width:700px){ .svc-also-box{padding:22px 18px; margin-top:44px;} .svc-also-items{grid-template-columns:1fr;} }
/* Zig-zag rows (Delta Railroad locations): the video takes about 58% beside its text, the side flips each row, photos follow underneath */
.cs-zig{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(24px,3.5vw,48px); align-items:center;}
.cs-zig > .ph-media{margin:0;}
.cs-zig-text .cs-blurb{margin-bottom:0;}
.cs-zig-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);}
.cs-zig-flip > .ph-media{order:2;}
.cs-sec .cs-zig + .cs-pair{margin-top:16px;}
@media(max-width:700px){ .cs-zig, .cs-zig-flip{grid-template-columns:1fr; gap:16px;} .cs-zig-flip > .ph-media{order:0;} .cs-zig > .ph-media{order:1;} .cs-zig-text{order:0;} }
.cs-sec:has(> .cs-zig) + .cs-sec:has(> .cs-zig){margin-top:clamp(48px,6vw,84px);}
/* the outline button over the closing photo turns orange on hover, like the orange Get a Quote beside it */
@media(hover:hover){ .ctafin-btns .cta-outline:hover{background:var(--orange); border-color:var(--orange); color:var(--charcoal);} }
html .ctafin-btns .cta-outline.hold, html .ctafin-btns .cta-outline.tap-active{background:var(--orange); border-color:var(--orange); color:var(--charcoal);}
/* buttons lift on hover the same way the Work tabs do: up 4px with a soft shadow, on top of their own color change */
@media(hover:hover){
  .cta:hover, .cta-outline:hover{transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.12);}
  .ctafin-btns .cta:hover, .ctafin-btns .cta-outline:hover{box-shadow:0 12px 24px rgba(0,0,0,0.3);}
  html footer .foot-links span.foot-review:hover{transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.3);}
}
html footer .foot-links span.foot-review{transition:background .15s ease, color .15s ease, transform .2s ease, box-shadow .2s ease;}
/* phones have no hover: pressing a button gives the same lift and color change (the press-and-hold system in app.js adds .hold) */
html .cta.hold{transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.12); background:var(--charcoal); color:var(--cream);}
html .cta-outline.hold{transform:translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.12); background:var(--charcoal); color:var(--cream);}
html .ctafin-btns .cta.hold, html .ctafin-btns .cta-outline.hold{box-shadow:0 12px 24px rgba(0,0,0,0.3);}
html a.svc-also-item.hold{transform:translateY(-3px); border-color:var(--charcoal); box-shadow:0 10px 20px rgba(0,0,0,0.08);}
.cta, .cta-outline, a.svc-also-item{-webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;}
/* contact form pickers: pick several (check marks and a Done button), headings inside long lists, and a greyed out picker */
.acc-select[data-multi="true"].open .acc-opts{max-height:340px;}
.acc-opt.sel{color:var(--charcoal); font-weight:600; background:#FFF6EA;}
.acc-select[data-multi="true"] .acc-opt{position:relative; padding-left:44px;}
.acc-select[data-multi="true"] .acc-opt::before{content:""; position:absolute; left:16px; top:50%; width:16px; height:16px; margin-top:-8px; border:1.5px solid var(--charcoal-soft); border-radius:4px; background:var(--white);}
.acc-select[data-multi="true"] .acc-opt.sel::before{border-color:var(--orange); background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;}
.acc-group{padding:12px 16px 6px; border-top:1px solid var(--line); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); background:var(--cream);}
.acc-note{padding:12px 16px; border-top:1px solid var(--line); font-size:.88rem; color:var(--charcoal-soft); font-style:italic;}
.acc-done{position:sticky; bottom:0; display:block; width:100%; padding:12px 16px; border:0; border-top:1px solid var(--line); background:var(--charcoal); color:var(--cream); font:inherit; font-size:.9rem; font-weight:700; cursor:pointer;}
.acc-select.acc-off{background:#F3F0EA;}
.acc-select.acc-off .acc-head{cursor:default; color:#9A978F;}
.acc-select.acc-off .acc-head .plus{opacity:.35;}
/* links inside running text on project pages read as links: dark, bold and underlined, like "See retainers" */
.cs-blurb a, .cs-meta a, .cs-fact p a{color:var(--charcoal); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:1.5px; text-underline-offset:3px; transition:color .2s ease;}
@media(hover:hover){ .cs-blurb a:hover, .cs-meta a:hover, .cs-fact p a:hover{color:var(--orange);} }
/* Hover lift without the jitter: when a button lifts, an invisible strip fills the gap it leaves underneath,
   so a cursor resting on its bottom edge stays on it instead of making it drop and lift again and again */
@media(hover:hover){
  .cta, .cta-outline, .tabs button, a.cs-svc, a.svc-also-item, .tcard, .stats3 .stat, .faq-item, .loc-card, html footer .foot-links span.foot-review{position:relative;}
  .cta:hover::after, .cta-outline:hover::after, .tabs button:hover::after, a.cs-svc:hover::after, a.svc-also-item:hover::after, .tcard:hover::after, .stats3 .stat:hover::after, .faq-item:hover::after, .loc-card:hover::after, html footer .foot-links span.foot-review:hover::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px;}
}
/* the same strip for the work cards and the homepage problem/solution cards; they no longer clip their edges (they are square
   and their photos clip themselves), so the strip under a lifted card can catch the cursor */
.wcard, .pscard, .psrows .pscard{overflow:visible;}
.pscard{position:relative;}
@media(hover:hover){ .wcard:hover::after, .pscard:hover::after{content:""; position:absolute; left:0; right:0; top:100%; height:14px;} }

/* Closing CTA buttons: equal width, and the secondary gets a frosted dark fill so the photo doesn't show through it */
.ctafin-btns{display:grid; grid-template-columns:repeat(2,minmax(0,220px)); justify-content:center; gap:14px;}
.ctafin-btns .cta, .ctafin-btns .cta-outline{width:100%; min-height:50px; margin:0; padding-left:14px; padding-right:14px; white-space:nowrap;}
.ctafin-btns .cta-outline{background:rgba(30,31,27,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-color:rgba(250,247,242,.85);}
@media(max-width:400px){ .ctafin-btns{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;} .ctafin-btns .cta, .ctafin-btns .cta-outline{font-size:.86rem; padding-left:8px; padding-right:8px;} }
video.loop[data-nopause]{cursor:default;}

/* Related project card: a cross-link to another project, given the weight of a work card */
.cs-rel{display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); margin-top:clamp(40px,5vw,64px); border:1px solid var(--line); border-radius:18px; background:var(--white); box-shadow:0 10px 28px rgba(58,60,53,0.06); text-decoration:none; color:var(--charcoal); position:relative; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;}
.cs-rel-img{position:relative; display:block; min-height:220px; background:#ECE8E0; overflow:hidden; border-radius:17px 0 0 17px;}
.cs-rel-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.cs-rel-body{display:flex; flex-direction:column; justify-content:center; gap:8px; padding:clamp(22px,3vw,36px);}
.cs-rel-eyebrow{color:var(--orange); font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;}
.cs-rel-title{font-weight:700; font-size:clamp(1.35rem,1.2vw + .9rem,1.8rem); line-height:1.2;}
.cs-rel-text{color:var(--charcoal-soft); font-size:.98rem; line-height:1.5;}
.cs-rel-go{margin-top:6px; font-weight:700; color:var(--charcoal); display:inline-flex; align-items:center; gap:6px; align-self:flex-start; border-bottom:2px solid var(--orange); padding-bottom:2px;}
.cs-rel-go span{color:var(--orange); transition:transform .2s ease;}
@media(hover:hover){
  .cs-rel:hover{transform:translateY(-4px); border-color:var(--charcoal); box-shadow:0 16px 32px rgba(0,0,0,0.10);}
  .cs-rel:hover .cs-rel-img img{transform:scale(1.04);}
  .cs-rel:hover .cs-rel-go span{transform:translateX(4px);}
  .cs-rel:hover::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px;}
}
html a.cs-rel.hold{transform:translateY(-4px); border-color:var(--charcoal); box-shadow:0 16px 32px rgba(0,0,0,0.10);}
@media(max-width:700px){ .cs-rel{grid-template-columns:1fr; margin-top:40px;} .cs-rel-img{min-height:0; aspect-ratio:16/9; border-radius:17px 17px 0 0;} .cs-rel-body{padding:20px 18px 22px;} }
.cs-sec .cs-rel{margin-top:18px;}
/* several related projects: a heading and a row of compact cards */
.cs-rel-head{margin-top:clamp(40px,5vw,64px); color:var(--orange); font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;}
.cs-rel-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:12px;}
.cs-rel-grid .cs-rel{margin-top:0;}
.cs-rel.cs-rel-sm{grid-template-columns:1fr; grid-template-rows:auto 1fr;}
.cs-rel-sm .cs-rel-img{min-height:0; aspect-ratio:3/2; border-radius:17px 17px 0 0;}
.cs-rel-sm .cs-rel-body{justify-content:flex-start; padding:18px 20px 20px; gap:6px;}
.cs-rel-sm .cs-rel-eyebrow{display:none;}
.cs-rel-sm .cs-rel-title{font-size:1.2rem;}
.cs-rel-sm .cs-rel-text{font-size:.92rem;}
.cs-rel-sm .cs-rel-go{margin-top:auto; padding-top:8px;}
@media(max-width:860px){ .cs-rel-grid{grid-template-columns:1fr; gap:12px;}
  .cs-rel.cs-rel-sm{grid-template-columns:38% minmax(0,1fr); grid-template-rows:auto;}
  .cs-rel-sm .cs-rel-img{aspect-ratio:auto; min-height:120px; border-radius:17px 0 0 17px;}
  .cs-rel-sm .cs-rel-body{padding:14px 14px 16px;} .cs-rel-sm .cs-rel-text{display:none;} .cs-rel-sm .cs-rel-go{margin-top:6px; padding-top:0;} }
/* breathing room so hovered (lifted) photos never ride over the caption or facts above them */
.cs .cs-meta + :is(.cs-pair,.cs-three,.cs-four,.cs-sec,.ph-media,.cs-mos-wrap,.cs-just,.cs-split){margin-top:22px;}
.cs .cs-facts-row + :is(.ph-media,.cs-pair,.cs-three,.cs-four,.cs-mos-wrap,.cs-just){margin-top:22px;}
/* "Coming soon" tag on a deliverable that is still on its way */
.ph-soon{display:inline-block; margin-top:2px; padding:4px 10px; border-radius:999px; background:var(--orange); color:var(--charcoal); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
/* homepage hero: one video per screen shape; the hidden one is never played (display:none never intersects) */
.hero-media video.hero-port{display:none;}
@media (orientation: portrait){ .hero-media video.hero-land{display:none;} .hero-media video.hero-port{display:block;} }