/* ===============================================================
 * Cuts-N-Stuff Team
 *
 * Geometry follows the approved Figma frames at the 1440px artboard
 * width: "Meet the Team" (395:49275) and the stylist Detail frames
 * (385:49099 and siblings). Comments give the frame coordinate where a
 * number is not self-explanatory.
 *
 * The tokens below repeat the ones the Services plugin declares. Both
 * plugins ship them so either can be switched off without taking the
 * other's styling with it; the values are identical, so whichever loads
 * second is a no-op.
 * ============================================================ */

:root{
  --cns-cream:#FFF8E9;
  --cns-gold:#F8D67A;
  --cns-plum:#660033;
  --cns-crimson:#940028;
  --cns-rule:#ECECEC;
  --cns-dot:#7A0B33;
  --cns-grad:linear-gradient(90deg,#C90012 15%,#660033 100%);
  --cns-serif:"Noto Serif",Georgia,serif;
  --cns-sans:"Helvetica Now Display","Helvetica Neue",Arial,sans-serif;
}

.cns-tm-hero,.cns-tm-grid-sec,.cns-tm-cta,.cns-tm-bio,.cns-tm-work{
  --cns-tex:url(../img/texture-lines.png);
  --cns-spark:url(../img/sparkle.svg);
}

.cns-tm-hero *,.cns-tm-grid-sec *,.cns-tm-cta *,.cns-tm-bio *,.cns-tm-work *{box-sizing:border-box;}

/* Gradient text, the site's one display flourish. The padding/negative-margin
   pair keeps italic glyphs from clipping against the background box. */
.cns-tm-h1-accent,.cns-tm-name,.cns-tm-cta-h2 em,.cns-tm-bio-name,
.cns-tm-work-h2 em,.cns-tm-bio-head,.cns-tm-hero-body-accent{
  background:var(--cns-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding:0 .1em 0 0;margin-right:-.1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}

.cns-tm-arrow{display:inline-block;font-family:var(--cns-sans);font-style:normal;
  font-weight:400;line-height:1;}
.cns-tm-arrow::before{content:"\2192";}

.cns-tm-hero .screen-reader-text,.cns-tm-grid-sec .screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------------------------------------------------------------
 * Hero — frame y 101–772
 * ------------------------------------------------------------ */

.cns-tm-hero{width:100%;border-bottom:1px dotted var(--cns-dot);
  background-color:var(--cns-cream);background-image:var(--cns-tex);
  background-position:center top;background-size:1440px auto;background-repeat:repeat;}
.cns-tm-hero-inner{position:relative;width:1440px;max-width:100%;height:671px;
  margin:0 auto;padding:135px 24px 0 111px;}

/* Sparkles sit on the artboard grid. The two right-hand ones are held inside
   the edge on windows narrower than the artboard so they never get cut off. */
.cns-tm-hero-inner::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:var(--cns-spark) min(1220px,calc(100% - 150px)) 51px/144px 144px no-repeat,
             var(--cns-spark) 738px 188px/99px 99px no-repeat,
             var(--cns-spark) min(1159px,calc(100% - 90px)) 555px/64px 64px no-repeat;}
.cns-tm-hero-copy{position:relative;z-index:1;}

.cns-tm-eyebrow{display:inline-block;margin:0;padding:6px 20px;border-radius:999px;
  background:var(--cns-gold);color:var(--cns-plum);font-family:var(--cns-sans);
  font-size:14px;font-weight:700;line-height:19px;letter-spacing:.04em;
  text-transform:uppercase;}

.cns-tm-h1{max-width:640px;margin:29px 0 0;font-family:var(--cns-serif);
  font-weight:400;font-size:86px;line-height:1.09;letter-spacing:-.06em;color:#000;}
.cns-tm-h1-plain{color:#000;}
.cns-tm-h1-accent{font-style:italic;font-weight:500;}

.cns-tm-hero-body{max-width:422px;margin:29px 0 0;font-family:var(--cns-sans);
  font-size:16px;line-height:1.27;letter-spacing:-.04em;color:#000;}
.cns-tm-hero-body-accent{margin-top:20px;font-weight:500;}

.cns-tm-chair{position:absolute;left:829px;top:45px;z-index:1;
  width:367px;height:551px;object-fit:contain;}

/* ---------------------------------------------------------------
 * Card grid — frame y 772–2326
 * ------------------------------------------------------------ */

.cns-tm-grid-sec{width:100%;background:#fff;border-bottom:1px dotted var(--cns-dot);}
/* 3 x 325.68 + 2 x 60.32 = 1098, centred in the 1440 artboard. */
.cns-tm-grid-inner{width:1098px;max-width:100%;margin:0 auto;padding:44px 0 33px;}

.cns-tm-page{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:60.32px;row-gap:55px;}
.cns-tm-page[hidden]{display:none;}

/* Fixed height so the buttons line up across a row whatever the introduction
   runs to; the button is pushed to the bottom rather than following the text. */
.cns-tm-card{display:flex;flex-direction:column;height:672px;text-align:center;}

.cns-tm-shot{display:block;width:100%;height:438.61px;overflow:hidden;
  border:9px solid var(--cns-gold);
  border-radius:205.78px 205.78px 26.55px 26.55px;
  box-shadow:0 4px 15.3px rgba(0,0,0,.21);background:var(--cns-cream);}
.cns-tm-shot{position:relative;}
/* Absolutely filled rather than height:100%, which some themes' img{height:auto}
   turns back into the photo's own proportions and leaves a strip under it. */
.cns-tm-shot img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;}

.cns-tm-name{margin:18.39px 0 0;font-family:var(--cns-serif);font-weight:400;
  font-size:28px;line-height:1.029;letter-spacing:-.06em;}
.cns-tm-role{margin:6px 0 0;font-family:var(--cns-sans);font-style:italic;
  font-size:14px;line-height:16px;color:#000;}
.cns-tm-blurb{width:314px;max-width:100%;margin:9px auto 0;
  font-family:var(--cns-sans);font-size:14px;line-height:1.25;
  letter-spacing:-.04em;color:#000;}

.cns-tm-more{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:317px;max-width:100%;height:44px;margin:auto auto 0;border-radius:45px;
  background:linear-gradient(106.55deg,#C90012 15.87%,#660033 71.86%);
  color:var(--cns-gold);font-family:var(--cns-sans);font-size:14px;font-weight:700;
  line-height:19px;text-decoration:none;transition:filter .18s ease;}
.cns-tm-more:hover,.cns-tm-more:focus{filter:brightness(1.12);color:var(--cns-gold);}
.cns-tm-more .cns-tm-arrow{font-size:19px;}

/* Pager — frame y 2260–2293 */
.cns-tm-pager{display:flex;align-items:center;justify-content:center;
  gap:32px;margin-top:45px;}
/* Hello Elementor's reset.css styles every <button> — 1px #c36 border, 3px
   radius, .5rem/1rem padding, transparent background. It carries no !important
   and less specificity than these rules, yet still wins in the browser, so the
   handful of properties it touches are forced here rather than argued with. */
.cns-tm-pager .cns-tm-nav{display:inline-flex !important;align-items:center;justify-content:center;
  flex:0 0 auto;width:34px !important;height:33px !important;min-width:0;min-height:0;
  margin:0;padding:0 !important;border:0 !important;border-radius:50% !important;
  background-color:var(--cns-gold) !important;background-image:none;box-shadow:none;
  color:var(--cns-crimson) !important;font-size:0;line-height:0;white-space:nowrap;
  text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:filter .18s ease;}
.cns-tm-pager .cns-tm-nav:hover,.cns-tm-pager .cns-tm-nav:focus{
  filter:brightness(1.06);background-color:var(--cns-gold) !important;
  color:var(--cns-crimson) !important;}
.cns-tm-pager .cns-tm-nav[disabled]{opacity:.4;cursor:default;}
/* Drawn rather than set as a glyph: the design's chevron is 11x15 of solid
   stroke, which no ordinary text arrow gets near at this size. */
.cns-tm-pager .cns-tm-nav::before{content:"";display:block;width:10px;height:10px;
  border-top:3px solid currentColor;border-right:3px solid currentColor;}
.cns-tm-pager .cns-tm-prev::before{transform:rotate(-135deg);margin-left:3px;}
.cns-tm-pager .cns-tm-next::before{transform:rotate(45deg);margin-right:3px;}

.cns-tm-dots{display:flex;align-items:center;gap:11px;}
.cns-tm-pager .cns-tm-dot{display:block !important;flex:0 0 auto;
  width:18px !important;height:17px !important;min-width:0;min-height:0;
  margin:0;padding:0 !important;border:0 !important;border-radius:50% !important;
  background-color:#D9D9D9 !important;background-image:none;box-shadow:none;
  line-height:0;font-size:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color .15s,width .15s,height .15s;}
.cns-tm-pager .cns-tm-dot:hover{background-color:#C9BEB0 !important;}
.cns-tm-pager .cns-tm-dot.is-active{width:23px !important;height:23px !important;
  background-color:var(--cns-crimson) !important;}

/* ---------------------------------------------------------------
 * "Found Your Stylist?" band — frame y 2367–2788
 * ------------------------------------------------------------ */

/* The cream the band floats on, 41px of it above and below. */
.cns-tm-cta{width:100%;padding:41px 0;
  background-color:var(--cns-cream);background-image:var(--cns-tex);
  background-position:center top;background-size:1440px auto;background-repeat:repeat;}
.cns-tm-cta-band{width:100%;
  background-color:var(--cns-gold);background-image:var(--cns-tex);
  background-position:center top;background-size:1440px auto;background-repeat:repeat;}
.cns-tm-cta-inner{width:1440px;max-width:100%;margin:0 auto;padding:60px 24px 48px;
  text-align:center;}

.cns-tm-cta-eyebrow{display:inline-block;margin:0;padding:6px 22px;border-radius:999px;
  background:var(--cns-plum);color:var(--cns-gold);font-family:var(--cns-sans);
  font-size:14px;font-weight:700;line-height:19px;letter-spacing:.04em;
  text-transform:uppercase;}

.cns-tm-cta-h2{max-width:960px;margin:16px auto 0;font-family:var(--cns-serif);
  font-weight:400;font-size:77px;line-height:1.25;letter-spacing:-.06em;color:#000;}
.cns-tm-cta-line{display:block;}
.cns-tm-cta-h2 em{font-style:italic;font-weight:500;}

.cns-tm-cta-btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:188px;height:44px;margin-top:30px;padding:0 20px;border-radius:999px;
  background:linear-gradient(106.55deg,#C90012 15.87%,#660033 71.86%);
  color:var(--cns-gold);font-family:var(--cns-sans);font-size:14px;font-weight:700;
  line-height:19px;text-decoration:none;transition:filter .18s ease;}
.cns-tm-cta-btn:hover,.cns-tm-cta-btn:focus{filter:brightness(1.12);color:var(--cns-gold);}

/* ---------------------------------------------------------------
 * Stylist page — Detail frame
 * ------------------------------------------------------------ */

/* The cream sliver between the header and the biography, frame y 101–167. */
.cns-tm-strip{width:100%;height:66px;border-bottom:1px dotted var(--cns-dot);
  background-color:var(--cns-cream);background-image:var(--cns-tex);
  background-position:center top;background-size:1440px auto;background-repeat:repeat;}

.cns-tm-bio{width:100%;background:#fff;border-bottom:1px dotted var(--cns-dot);}
.cns-tm-bio-inner{display:grid;grid-template-columns:592px 1fr;column-gap:48px;
  width:1440px;max-width:100%;margin:0 auto;padding:48px 126px;}

.cns-tm-portrait{margin:0;}
.cns-tm-portrait img{display:block;width:100%;height:562px;object-fit:cover;
  /* The frame is wider than the photos are, so a centred crop cuts heads off.
     Anchoring to the top keeps everyone's face, and loses only their feet. */
  object-position:center top;border-radius:19px;}

.cns-tm-bio-copy{padding-top:11px;}
.cns-tm-bio-name{margin:0;font-family:var(--cns-serif);font-weight:400;
  font-size:46px;line-height:1.029;letter-spacing:-.06em;}
.cns-tm-bio-role{margin:14px 0 0;font-family:var(--cns-sans);font-style:italic;
  font-size:20px;line-height:1.2;color:#000;}
.cns-tm-bio-rule{margin:14px 0 0;height:0;border:0;border-top:1px solid var(--cns-rule);}
.cns-tm-bio-head{margin:22px 0 0;font-family:var(--cns-sans);font-weight:500;
  font-size:20px;line-height:1.2;}
.cns-tm-bio-body{margin:14px 0 0;font-family:var(--cns-sans);font-size:16px;
  line-height:1.27;letter-spacing:-.04em;color:#000;}
.cns-tm-bio-body+.cns-tm-bio-body{margin-top:20px;}

.cns-tm-work{width:100%;
  background-color:var(--cns-cream);background-image:var(--cns-tex);
  background-position:center top;background-size:1440px auto;background-repeat:repeat;}
.cns-tm-work-inner{width:1440px;max-width:100%;margin:0 auto;padding:66px 126px 59px;}
.cns-tm-work-h2{margin:0;font-family:var(--cns-serif);font-weight:400;font-size:46px;
  line-height:1.029;letter-spacing:-.06em;color:#000;}
.cns-tm-work-h2 em{font-style:italic;font-weight:500;}

.cns-tm-work-grid{display:grid;grid-template-columns:repeat(4,254px);
  gap:55px 25px;justify-content:start;margin-top:55px;}
.cns-tm-work-item{margin:0;}
.cns-tm-work-item img{display:block;width:254px;height:345px;object-fit:cover;
  border-radius:19px;}

/* ---------------------------------------------------------------
 * Narrower screens
 * ------------------------------------------------------------ */

@media(max-width:1200px){
  .cns-tm-hero-inner{height:auto;padding:56px 32px 48px;text-align:center;}
  /* Stacked layout: tuck the sparkles into the corners around the copy. */
  .cns-tm-hero-inner::before{
    background:var(--cns-spark) right 6% top 36px/104px 104px no-repeat,
               var(--cns-spark) left 6% top 300px/72px 72px no-repeat,
               var(--cns-spark) right 14% bottom 90px/52px 52px no-repeat;}
  .cns-tm-h1{max-width:none;font-size:56px;}
  .cns-tm-hero-body{max-width:520px;margin-inline:auto;}
  /* The chair follows the copy once there is no column to sit beside. */
  .cns-tm-chair{position:static;display:block;margin:32px auto 0;
    width:260px;height:390px;}

  .cns-tm-grid-inner{width:100%;padding:44px 32px 33px;}
  .cns-tm-page{grid-template-columns:repeat(2,1fr);column-gap:32px;}
  .cns-tm-card{height:auto;}
  .cns-tm-shot{height:auto;aspect-ratio:325.68/438.61;}
  .cns-tm-more{margin-top:20px;width:100%;}

  .cns-tm-cta-h2{font-size:52px;}

  .cns-tm-bio-inner{grid-template-columns:1fr;row-gap:28px;padding:40px 32px;}
  .cns-tm-portrait img{height:auto;aspect-ratio:592/562;}
  .cns-tm-bio-copy{padding-top:0;}
  .cns-tm-bio-name{font-size:36px;}

  .cns-tm-work-inner{padding:48px 32px;}
  .cns-tm-work-h2{font-size:36px;}
  .cns-tm-work-grid{grid-template-columns:repeat(3,1fr);gap:24px;}
  .cns-tm-work-item img{width:100%;height:auto;aspect-ratio:254/345;}
}

@media(max-width:767px){
  .cns-tm-hero-inner{padding:40px 16px 36px;}
  .cns-tm-hero-inner::before{
    background:var(--cns-spark) right 3% top 14px/56px 56px no-repeat,
               var(--cns-spark) left 9% top 480px/40px 40px no-repeat,
               var(--cns-spark) right 8% bottom 70px/34px 34px no-repeat;}
  .cns-tm-h1{font-size:40px;}
  .cns-tm-hero-body{font-size:15px;}
  .cns-tm-chair{width:200px;height:300px;}

  .cns-tm-grid-inner{padding:36px 16px 28px;}
  .cns-tm-page{grid-template-columns:1fr;row-gap:36px;}
  .cns-tm-blurb{width:100%;}

  .cns-tm-cta{padding:24px 0;}
  .cns-tm-cta-inner{padding:44px 16px 36px;}
  .cns-tm-cta-h2{font-size:34px;}
  .cns-tm-cta-btn{width:100%;}

  .cns-tm-strip{height:40px;}
  .cns-tm-bio-inner{padding:32px 16px;}
  .cns-tm-bio-name{font-size:30px;}
  .cns-tm-work-inner{padding:36px 16px;}
  .cns-tm-work-h2{font-size:30px;}
  .cns-tm-work-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}

/* Somebody whose photo has not arrived yet. */
.cns-tm-shot.is-empty,.cns-tm-portrait.is-empty{display:flex;align-items:center;
  justify-content:center;background:var(--cns-cream);}
.cns-tm-portrait.is-empty{height:562px;border-radius:19px;border:1px dashed #E0D5C4;}
.cns-tm-soon{font-family:var(--cns-sans);font-size:14px;font-style:italic;color:#A79683;
  text-decoration:none;
  text-align:center;padding:0 16px;}
@media(max-width:1200px){
  .cns-tm-portrait.is-empty{height:auto;aspect-ratio:592/562;}
}

/* The team page is the site's About Us, so mark that nav item as the current
   section while a stylist's page is open. The header template gives the item no
   id of its own, so it is matched on its href — same as the Services plugin. */
body.cns-stylist-page #cns-header-inner a[href*="/meet-our-team"]{
  color:var(--cns-plum);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;}