@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap');
/* Rose and Thorn: "What we do" expanding photo panels (Nov 2026). Photo/video fills each panel, words on top. */
#services .sp-panels.service-card-grid{display:flex!important;gap:10px;height:clamp(480px,64vh,620px);margin-top:28px;grid-template-columns:none}
#services .sp-panels .sp-card{position:relative;flex:1 1 0;min-width:0;display:block!important;margin:0;padding:0;border:0;border-radius:24px;overflow:hidden;isolation:isolate;
  background:#1b120a;color:#fff4e2;scroll-margin-top:100px;
  box-shadow:0 26px 50px -30px rgba(40,22,6,.75),0 0 0 1px rgba(242,183,100,.2);
  transition:flex-grow .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
#services .sp-panels .sp-card.sp-open{flex-grow:5.2;box-shadow:0 34px 60px -28px rgba(40,22,6,.85),0 0 0 1px rgba(242,183,100,.38)}
/* the photo or video fills the whole panel */
#services .sp-panels .sp-card>figure{position:absolute!important;inset:0;width:auto;height:auto!important;min-height:0!important;max-height:none!important;margin:0;z-index:-2;aspect-ratio:auto!important;background:#2a1c10 center/cover no-repeat}
#services .sp-panels .sp-card>figure>img,#services .sp-panels .sp-card>figure>video{position:absolute!important;inset:0;display:block;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;object-fit:cover;transform:scale(1.025);transition:transform 1.6s cubic-bezier(.2,.7,.2,1),filter .6s}
#services .sp-panels .sp-card:not(.sp-open)>figure>img{filter:saturate(.85) brightness(.88)}
#services .sp-panels .sp-card.sp-open>figure>img,#services .sp-panels .sp-card.sp-open>figure>video{transform:none}
/* closed panels: no video (never loads or plays), just the poster still */
#services .sp-panels .sp-card:not(.sp-open)>figure>video{display:none}
/* honey-dark fade so the words read on any photo */
#services .sp-panels .sp-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,12,5,.3) 0,rgba(20,12,5,0) 22%,rgba(20,12,5,0) 42%,rgba(20,12,5,.55) 68%,rgba(20,12,5,.9) 100%)}
/* tag, top left (open panel only) */
#services .sp-panels .sp-card figcaption{display:inline-flex!important;align-items:center;position:absolute;top:16px;left:16px;bottom:auto;right:auto;width:auto;height:auto;z-index:2;padding:6px 12px;border-radius:999px;white-space:nowrap;
  font:700 10px/1.2 Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#fff4e2;text-shadow:none;background:rgba(27,18,10,.45);border:1px solid rgba(255,230,190,.32);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
#services .sp-panels .sp-open figcaption{opacity:1;transition-delay:.25s}
#services .sp-panels .sp-video figcaption::before{content:"";width:7px;height:7px;margin-right:8px;border-radius:50%;background:#ff5b4f;box-shadow:0 0 8px #ff5b4f;animation:spBlink 1.6s infinite}
@keyframes spBlink{50%{opacity:.35}}
/* words over the photo (open panel only) */
#services .sp-panels .sp-card>div{position:absolute;left:0;bottom:0;width:min(520px,100%);padding:24px clamp(20px,3vw,32px) clamp(22px,3vw,30px);background:none;
  opacity:0;transform:translateY(14px);visibility:hidden;transition:opacity .25s,transform .4s,visibility 0s .25s}
#services .sp-panels .sp-open>div{opacity:1;transform:none;visibility:visible;transition:opacity .4s .28s,transform .5s .28s,visibility 0s}
#services .sp-panels .sp-card h3{margin:0;font:500 clamp(34px,3.6vw,48px)/1 'Cormorant Garamond',Georgia,serif;color:#fff4e2;letter-spacing:.2px;white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.35)}
#services .sp-panels .sp-card p{margin:8px 0 16px;max-width:36ch;font:15px/1.5 Arial,sans-serif;color:#f0dcc0}
#services .sp-panels .sp-card .story-action{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 17px;border-radius:999px;text-decoration:none;
  font:700 13.5px/1 Arial,sans-serif;color:#2a1808;background:linear-gradient(180deg,#ffd896,#e19a45);border:1px solid rgba(255,230,190,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 18px -8px rgba(232,150,60,.85)}
#services .sp-panels .sp-card .story-action:active{transform:scale(.97)}
/* closed panel = one big button with the name running up the slice */
#services .sp-panels .sp-tab{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;color:#fff4e2;-webkit-tap-highlight-color:transparent}
#services .sp-panels .sp-tab:focus-visible{outline:3px solid #f2b764;outline-offset:-3px}
#services .sp-panels .sp-tab span{position:absolute;left:50%;bottom:26px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;
  font:500 26px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.3px;text-shadow:0 2px 12px rgba(0,0,0,.5);transition:opacity .25s}
#services .sp-panels .sp-card:not(.sp-open):hover .sp-tab span{color:#ffd896}
#services .sp-panels .sp-open .sp-tab{pointer-events:none}
#services .sp-panels .sp-open .sp-tab span{opacity:0}
/* Desktop: retain readable side slices and let the expansion breathe. */
@media (min-width:821px){
  #services .sp-panels .sp-card{transition:flex-grow .75s cubic-bezier(.25,.65,.25,1),box-shadow .5s}
  #services .sp-panels .sp-card.sp-open{flex-grow:2.7}
  #services .sp-panels .sp-card h3{font-size:clamp(30px,2.7vw,42px);white-space:normal}
}
/* phones: every slice on screen; sliding a finger moves a "bubble" along the row (widths set by services-panels.js) */
#services .sp-hint{display:none}
@media (max-width:820px){
  #services .sp-panels.service-card-grid{gap:4px;height:min(540px,70vh);width:auto!important;max-width:none!important;margin:18px 0 0!important;padding:0 14px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  #services .sp-panels .sp-card{flex:none;width:18px;border-radius:16px;transition:box-shadow .4s}
  #services .sp-panels .sp-card.sp-open{flex:none}
  #services .sp-panels .sp-card>figure>img,#services .sp-panels .sp-card>figure>video{-webkit-user-drag:none;pointer-events:none}
  /* names shrink with the slice and fade on the thinnest ones */
  #services .sp-panels .sp-tab span{font-size:15px;bottom:14px;opacity:calc(.35 + var(--sp-w,0) * 9)}
  #services .sp-panels .sp-card h3{font-size:30px;white-space:normal}
  #services .sp-panels .sp-card p{font-size:13.5px;margin:6px 0 12px}
  #services .sp-panels .sp-card>div{width:var(--sp-open-w,100%);padding:18px 16px 18px}
  #services .sp-panels .sp-card .story-action{min-height:38px;padding:0 15px;font-size:13px}
  #services .sp-panels .sp-card figcaption{top:12px;left:12px;font-size:9px;letter-spacing:1.2px}
  #services .sp-panels.sp-dragging .sp-card>div{transition:opacity .15s,visibility 0s .15s}
  #services .sp-hint{display:block;margin:12px 0 0;text-align:center;font:600 12px/1 Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#a07a4f;transition:opacity .5s}
  #services .sp-hint span{display:inline-block;margin:0 6px;font-size:16px;animation:spNudge 1.8s ease-in-out infinite}
  #services .sp-hint span:last-child{animation-direction:reverse}
  #services .sp-hint.sp-hint-off{opacity:0}
}
@keyframes spNudge{50%{transform:translateX(-4px)}}
@media (prefers-reduced-motion:reduce){#services .sp-panels .sp-card,#services .sp-panels .sp-card *{transition:none!important}#services .sp-panels .sp-video figcaption::before,#services .sp-hint span{animation:none}}

/* from the live tune-up: native touch, no costly filters on moving phone panels */
#services .sp-panels{overflow-anchor:none}
#services .sp-panels .sp-tab{touch-action:manipulation}
@media(max-width:820px){
  #services .sp-panels.service-card-grid{height:min(540px,70svh)}
  #services .sp-panels .sp-card>figure>img,#services .sp-panels .sp-card>figure>video{transform:none;filter:none;transition:none}
  #services .sp-panels .sp-card figcaption{backdrop-filter:none;-webkit-backdrop-filter:none}
  #services .sp-panels .sp-open>div{transition-delay:.12s,.12s,0s}
}