/* ============================================================
   S&T Media Widgets — shared styles
   Colors map to Elementor Global Colors (with standalone
   fallbacks) so palette swaps in Site Settings flow through.
   ============================================================ */
:root{
  --sandt-accent:        var(--e-global-color-primary,   #DC143C);
  --sandt-accent-bright: var(--e-global-color-secondary, #FF5470);
  --sandt-ink:           var(--e-global-color-text,      #0A0A0A);
  --sandt-bg:            var(--e-global-color-accent,    #FAFAF8);
  --sandt-cream:         var(--e-global-color-cream,     #F3F0E8);
  --sandt-paper:         var(--e-global-color-paper,     #FFFFFF);
  --sandt-muted:         var(--e-global-color-muted,     #6B6B66);
  --sandt-fn-ig:    var(--e-global-color-fnig,    #DC143C);
  --sandt-fn-film:  var(--e-global-color-fnfilm,  #0A0A0A);
  --sandt-fn-tt:    var(--e-global-color-fntt,    #1F7A5A);
  --sandt-fn-eml:   var(--e-global-color-fneml,   #B8861F);
  --sandt-fn-money: var(--e-global-color-fnmoney, #2A4F8F);
  --sandt-sans:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sandt-serif:'Fraunces',Georgia,'Times New Roman',serif;
}

/* Sticky-pin fix. The theme/Elementor set body{overflow-x:hidden}, which makes the body a
   scroll container and breaks position:sticky (the SEO scrollytell visual wouldn't pin).
   overflow-x:clip prevents horizontal scroll WITHOUT creating a scroll container, so the
   pin works again. Scoped safely — this CSS only loads on pages that use a S&T widget. */
body{overflow-x:clip !important;overflow-y:visible !important}

/* shared building blocks */
.sandt-seo *,.sandt-stack *,.sandt-calendar *,.sandt-stat *{box-sizing:border-box}
.sandt-em{font-family:var(--sandt-serif);font-style:italic;font-weight:500;color:var(--sandt-accent)}

/* section header (light theme; SEO widget overrides to cream inline) */
.sandt-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:30px;border-bottom:2px solid var(--sandt-ink);padding-bottom:22px;margin-bottom:60px;flex-wrap:wrap}
.sandt-sec-head h3{font-size:clamp(30px,4vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1;margin:0}
.sandt-sec-head .idx{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sandt-accent)}

/* ============================================================
   #1  SEO — PINNED SCROLLYTELL  (.sandt-seo)
   ============================================================ */
.sandt-seo{font-family:var(--sandt-sans);color:var(--sandt-cream)}
.sandt-seo .sandt-scrolly{display:grid;grid-template-columns:1.05fr .82fr;gap:70px;align-items:start;position:relative}
.sandt-seo .scrolly-visual{position:sticky;top:84px;align-self:start}
.sandt-seo .canvas-wrap{position:relative}
.sandt-seo .frame-art{border:10px solid #c9a24a;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.3);position:relative;background:#000;line-height:0;aspect-ratio:5/6;overflow:hidden}
.sandt-seo .frame-art img,.sandt-seo .frame-art > svg{display:block;width:100%;height:100%;object-fit:cover}
.sandt-seo .geo-overlay{position:absolute;inset:0;width:100%;height:100%}
.sandt-seo .geo path,.sandt-seo .geo circle,.sandt-seo .geo line,.sandt-seo .geo rect{fill:none;stroke:var(--sandt-accent-bright);stroke-width:1.3;opacity:0;transition:opacity .5s ease}
.sandt-seo .geo .dot{fill:var(--sandt-accent-bright);stroke:none}
.sandt-seo .geo text{fill:var(--sandt-accent-bright);font-family:var(--sandt-sans);font-size:11px;font-weight:600;opacity:0;transition:opacity .4s ease;letter-spacing:.04em}
.sandt-seo .geo g{transition:opacity .45s ease}
.sandt-seo .canvas-wrap.math .geo path,.sandt-seo .canvas-wrap.math .geo line,.sandt-seo .canvas-wrap.math .geo rect{opacity:.92}
.sandt-seo .canvas-wrap.math .geo circle{opacity:.92}
.sandt-seo .canvas-wrap.math .geo text{opacity:.95}
.sandt-seo .canvas-wrap.dim-others .geo g:not(.focus){opacity:.1}
.sandt-seo .step-flag{position:absolute;top:16px;left:16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--sandt-accent);padding:8px 14px;border-radius:30px;z-index:5;transition:background .3s}
.sandt-seo .art-caption{position:absolute;bottom:16px;right:16px;font-family:var(--sandt-serif);font-style:italic;font-size:14px;color:rgba(255,255,255,.85);background:rgba(10,10,10,.4);padding:5px 12px;backdrop-filter:blur(4px)}
.sandt-seo .scrolly-steps{display:flex;flex-direction:column}
.sandt-seo .step{min-height:86vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .45s ease}
.sandt-seo .step.active{opacity:1}
.sandt-seo .step:first-child{min-height:64vh;justify-content:flex-start;padding-top:10px}
.sandt-seo .step .step-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sandt-accent-bright);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.sandt-seo .step .step-k::before{content:"";width:30px;height:1.5px;background:var(--sandt-accent-bright)}
.sandt-seo .step h3.big{font-size:clamp(34px,4.2vw,58px);font-weight:600;line-height:1.02;letter-spacing:-.035em;margin:0}
.sandt-seo .step h3.big i,.sandt-seo .step h3.big .sandt-em{font-family:var(--sandt-serif);font-style:italic;color:var(--sandt-accent-bright);font-weight:500}
.sandt-seo .step h4{font-size:clamp(28px,3.4vw,46px);font-weight:600;line-height:1.04;letter-spacing:-.03em;margin:0}
.sandt-seo .step p{margin-top:18px;font-size:17px;line-height:1.62;color:rgba(243,240,232,.82);max-width:42ch}
.sandt-seo .step .hint{margin-top:22px;font-size:13px;font-weight:600;letter-spacing:.04em;color:rgba(243,240,232,.5);display:flex;align-items:center;gap:8px}
.sandt-seo .seo-growth{font-size:clamp(56px,7vw,96px);font-weight:700;letter-spacing:-.04em;color:var(--sandt-accent-bright);line-height:.85;margin-top:30px}
.sandt-seo .seo-growth small{display:block;font-size:13.5px;font-weight:500;line-height:1.45;color:rgba(243,240,232,.7);margin-top:14px;max-width:34ch}
@media(max-width:880px){
  .sandt-seo .sandt-scrolly{grid-template-columns:1fr;gap:30px}
  .sandt-seo .scrolly-visual{position:static}
  .sandt-seo .step,.sandt-seo .step:first-child{min-height:auto;opacity:1;padding:34px 0}
}

/* ============================================================
   #2  16 -> 4 STACK COLLAPSE  (.sandt-stack)
   ============================================================ */
.sandt-stack{font-family:var(--sandt-sans);color:var(--sandt-ink)}
.sandt-stack .morph-head{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:14px}
.sandt-stack .morph-readout{font-weight:800;letter-spacing:-.05em;font-size:clamp(46px,8vw,104px);line-height:.9;display:flex;align-items:baseline;gap:18px}
.sandt-stack .morph-readout .from{color:var(--sandt-muted);transition:color .5s}
.sandt-stack .morph-readout .to{color:var(--sandt-accent)}
.sandt-stack .morph-readout .ar{font-size:.5em;color:var(--sandt-ink)}
.sandt-stack .morph-sub{font-size:16px;color:var(--sandt-ink);opacity:.82;max-width:46ch;margin-bottom:30px;line-height:1.5}
.sandt-stack .morph-btn{font-family:var(--sandt-sans);font-weight:600;font-size:14px;letter-spacing:.02em;border:1.5px solid var(--sandt-ink);background:var(--sandt-ink);color:var(--sandt-cream);padding:13px 24px;border-radius:40px;cursor:pointer;transition:.25s;display:inline-flex;align-items:center;gap:10px;margin-bottom:50px}
.sandt-stack .morph-btn:hover{background:var(--sandt-accent);border-color:var(--sandt-accent)}
.sandt-stack .morph-btn .a{transition:transform .4s;display:inline-block}
.sandt-stack .morph-stage{position:relative;min-height:300px;margin-bottom:30px}
.sandt-stack .stack16{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transition:opacity .6s ease}
.sandt-stack .chip{border:1.5px solid rgba(10,10,10,.22);border-radius:8px;padding:14px;background:var(--sandt-paper);transition:transform .7s cubic-bezier(.5,.05,.2,1),opacity .5s,border-color .4s,background .4s}
.sandt-stack .chip .cn{font-size:14px;font-weight:600;letter-spacing:-.01em}
.sandt-stack .chip .cm{font-size:11px;color:var(--sandt-muted);margin-top:4px;font-weight:500}
.sandt-stack .chip[data-mod="1"]{--mc:var(--sandt-fn-ig)}
.sandt-stack .chip[data-mod="2"]{--mc:var(--sandt-fn-tt)}
.sandt-stack .chip[data-mod="3"]{--mc:var(--sandt-fn-eml)}
.sandt-stack .chip[data-mod="4"]{--mc:var(--sandt-fn-money)}
.sandt-stack .stage-merged .chip{border-color:var(--mc);background:color-mix(in srgb,var(--mc) 8%,#fff)}
.sandt-stack .modules4{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;opacity:0;pointer-events:none;transition:opacity .6s ease .2s}
.sandt-stack .stage-merged .modules4{opacity:1;pointer-events:auto}
.sandt-stack .stage-merged .stack16{opacity:0;pointer-events:none}
.sandt-stack .mod{border:2px solid var(--mc);border-radius:10px;padding:22px 20px;background:color-mix(in srgb,var(--mc) 7%,#fff);display:flex;flex-direction:column;min-height:170px}
.sandt-stack .mod[data-m="1"]{--mc:var(--sandt-fn-ig)}
.sandt-stack .mod[data-m="2"]{--mc:var(--sandt-fn-tt)}
.sandt-stack .mod[data-m="3"]{--mc:var(--sandt-fn-eml)}
.sandt-stack .mod[data-m="4"]{--mc:var(--sandt-fn-money)}
.sandt-stack .mod .mh{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--mc)}
.sandt-stack .mod .md{font-size:12.5px;color:#44443e;margin-top:8px;line-height:1.4;flex:1}
.sandt-stack .mod .mf{font-size:11px;color:var(--sandt-muted);margin-top:12px;border-top:1px solid color-mix(in srgb,var(--mc) 30%,transparent);padding-top:10px}
.sandt-stack .soft-foot{display:flex;gap:60px;margin-top:30px;border-top:1px solid rgba(10,10,10,.14);padding-top:34px;flex-wrap:wrap}
.sandt-stack .soft-foot .m .v{font-size:46px;font-weight:700;letter-spacing:-.035em}
.sandt-stack .soft-foot .m .v em{color:var(--sandt-accent);font-style:normal}
.sandt-stack .soft-foot .m .k{font-size:13.5px;color:var(--sandt-muted);margin-top:6px;max-width:24ch}
@media(max-width:680px){
  .sandt-stack .stack16{grid-template-columns:repeat(2,1fr)}
  .sandt-stack .modules4{grid-template-columns:repeat(2,1fr);position:static;margin-top:24px}
  .sandt-stack .stage-merged .stack16{opacity:0;display:none}
  .sandt-stack .modules4{opacity:1;pointer-events:auto}
  .sandt-stack:not(.is-merged) .modules4{opacity:0;pointer-events:none}
}

/* ============================================================
   #3  CONTENT CALENDAR  (.sandt-calendar)
   ============================================================ */
.sandt-calendar{font-family:var(--sandt-sans);color:var(--sandt-ink)}
.sandt-calendar .cal-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.sandt-calendar .cal-month{font-family:var(--sandt-serif);font-style:italic;font-size:22px;margin-bottom:16px}
.sandt-calendar .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.sandt-calendar .cal-dow span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sandt-muted);padding-left:2px}
.sandt-calendar .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.sandt-calendar .d{aspect-ratio:1/1.05;border:1.5px solid rgba(10,10,10,.14);padding:8px;position:relative;display:flex;flex-direction:column;background:var(--sandt-paper);transition:.2s;overflow:hidden}
.sandt-calendar .d .nd{font-size:11px;color:var(--sandt-muted);font-weight:600}
.sandt-calendar .d.empty{background:transparent;border-color:rgba(10,10,10,.05)}
.sandt-calendar .d.ev{cursor:default}
.sandt-calendar .d.ev .ev-in{margin-top:auto;border-left:3px solid var(--ch);padding-left:7px}
.sandt-calendar .d.ev .ev-ch{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ch)}
.sandt-calendar .d.ev .ev-t{font-size:10.5px;line-height:1.2;color:var(--sandt-ink);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sandt-calendar .d.ev:hover{border-color:var(--sandt-ink);transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,10,10,.12);z-index:4}
.sandt-calendar .cal-side{border:2px solid var(--sandt-ink);padding:26px 24px;background:var(--sandt-paper);position:sticky;top:100px}
.sandt-calendar .cal-side h4{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sandt-accent);margin-bottom:18px}
.sandt-calendar .cal-side .row{display:flex;gap:12px;padding:13px 0;border-top:1px solid rgba(10,10,10,.1)}
.sandt-calendar .cal-side .row:first-of-type{border-top:none}
.sandt-calendar .cal-side .row .dt{font-size:12px;font-weight:700;min-width:34px;color:var(--sandt-ink)}
.sandt-calendar .cal-side .row .info b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.sandt-calendar .cal-side .row .info span{font-size:11.5px;color:var(--sandt-muted)}
.sandt-calendar .cal-side .row .info span em{font-style:normal;color:var(--ch,var(--sandt-accent));font-weight:700}
.sandt-calendar .cal-legend{display:flex;gap:20px;margin-top:26px;flex-wrap:wrap;font-size:12px;color:var(--sandt-ink)}
.sandt-calendar .cal-legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:middle;border-radius:2px}
@media(max-width:900px){.sandt-calendar .cal-layout{grid-template-columns:1fr}.sandt-calendar .cal-side{position:static}}

/* ============================================================
   #4  STAT COUNTER  (.sandt-stat)
   ============================================================ */
.sandt-stat{font-family:var(--sandt-sans);display:inline-flex;flex-direction:column}
.sandt-stat .stat-num{font-weight:700;letter-spacing:-.04em;line-height:.85;font-size:clamp(48px,8vw,118px);color:var(--sandt-accent)}
.sandt-stat .stat-lbl{font-size:13px;font-weight:500;color:var(--sandt-muted);margin-top:12px;max-width:22ch}
.sandt-stat[data-align="right"]{align-items:flex-end;text-align:right}
.sandt-stat[data-align="center"]{align-items:center;text-align:center}

/* ============================================================
   NATIVE SECTION HOOKS  (classes referenced by _elementor_data)
   These style core Elementor widgets that carry CSS classes.
   ============================================================ */
/* fixed nav */
.sandt-nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:color-mix(in srgb,var(--sandt-bg) 82%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--sandt-ink) 8%,transparent)}
.sandt-nav .sandt-logo .elementor-heading-title{font-weight:700}
.sandt-navlinks p{margin:0;display:flex;gap:34px;font-size:13.5px;font-weight:500}
.sandt-navlinks a{color:var(--sandt-ink);text-decoration:none;position:relative;transition:.2s}
.sandt-navlinks a:hover{color:var(--sandt-accent)}
.sandt-navcta .elementor-button{background:transparent;color:var(--sandt-ink);border:1.5px solid var(--sandt-ink);border-radius:40px;padding:9px 18px;font-weight:600;font-size:13.5px;transition:.25s;font-family:var(--sandt-sans)}
.sandt-navcta .elementor-button:hover{background:var(--sandt-accent);border-color:var(--sandt-accent);color:var(--sandt-cream)}
@media(max-width:820px){.sandt-navlinks{display:none}}

/* hero accent line (Fraunces italic phrase) */
.sandt-em-line .elementor-heading-title{font-style:italic}

/* band insets — constrain inner content to the 1320 grid on full-width bands */
.sandt-band > .e-con,.sandt-band > .e-con-inner{max-width:1320px;margin-inline:auto;width:100%}
.sandt-manifesto-p p{max-width:50ch}

/* work tiles */
.sandt-tile{overflow:hidden}
.sandt-tile > .elementor-widget-image,.sandt-tile > .e-con:has(.sandt-tile-shot){flex:0 0 46%}
.sandt-tile .elementor-widget-image,.sandt-tile-shot{align-self:stretch}
.sandt-tile .elementor-widget-image .elementor-widget-container,.sandt-tile-shot .elementor-widget-container{height:100%}
.sandt-tile-shot img{width:100%;height:100%;object-fit:cover;display:block;min-height:300px;aspect-ratio:4/3}
@media(max-width:820px){.sandt-tile{flex-direction:column!important}.sandt-tile > *{flex-basis:auto!important}}

/* closer email button */
.sandt-closer-btn .elementor-button{background:transparent;color:var(--sandt-cream);border:1.5px solid var(--sandt-cream);border-radius:60px;padding:20px 30px;font-size:clamp(20px,2.4vw,30px);font-weight:600;letter-spacing:-.02em;font-family:var(--sandt-sans);transition:.3s}
.sandt-closer-btn .elementor-button:hover{background:var(--sandt-cream);color:var(--sandt-accent)}

/* ============================================================
   ORIGINAL palette — serif display headings (class toggle, not per-widget)
   ============================================================ */
body.palette-original h1,body.palette-original h2,body.palette-original h3,body.palette-original h4,
body.palette-original .elementor-heading-title,
body.palette-original .sandt-seo .step h3.big,body.palette-original .sandt-seo .step h4,
body.palette-original .sandt-stack .morph-readout{font-family:var(--sandt-serif)!important}

/* ============================================================
   Reduced motion — show end states, skip animation
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .sandt-seo .canvas-wrap .geo path,.sandt-seo .canvas-wrap .geo line,.sandt-seo .canvas-wrap .geo rect,
  .sandt-seo .canvas-wrap .geo circle,.sandt-seo .canvas-wrap .geo text{opacity:.92;transition:none}
  .sandt-seo .step{opacity:1;transition:none}
  .sandt-stack .chip,.sandt-stack .stack16,.sandt-stack .modules4,.sandt-stack .morph-btn .a{transition:none}
  .sandt-calendar .d{transition:none}
}