.copyist-experience{--deep:#061e2c;--navy:#102f45;--blue:#304e6b;--ivory:#f2ecdf;--paper:#fffaf0;--terra:#ca7d58;--gold:#d4ad55;--ink:#112b39;--ease:cubic-bezier(.16,1,.3,1);--header-h:64px}
*{box-sizing:border-box}.copyist-experience{color:var(--ivory)}button,input,textarea{font:inherit}button{cursor:pointer}
.app{height:100%;display:grid;grid-template-rows:var(--header-h) minmax(0,1fr)}.top{position:relative;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(4,23,34,.98);border-bottom:1px solid rgba(255,255,255,.12)}.brand{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:900;letter-spacing:.07em}.brand-mark{width:22px;height:22px;background:var(--paper);mask:url("/creative-assets/diamond-mysfit.svg") center/contain no-repeat}.mode-label{padding:10px 28px;border-radius:30px;background:var(--gold);color:var(--deep);font-size:9px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.motto{color:var(--terra);font-size:9px;font-weight:950;letter-spacing:.15em;text-align:right;text-transform:uppercase}.motto span{display:block;color:rgba(255,255,255,.45)}

.viewport{position:relative;min-height:0;overflow:hidden}.panel{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .46s var(--ease),visibility 0s linear .46s}.panel.is-current{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.intro{background:radial-gradient(circle at 76% 34%,rgba(202,125,88,.16),transparent 36%),linear-gradient(115deg,#020a0f,#0b2a3b 48%,#304e6b)}.intro-layout{width:min(84vw,1210px);height:100%;margin:auto;padding:clamp(26px,4vh,48px) 0 clamp(28px,4.3vh,54px);display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.6fr);grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(58px,6vw,100px);row-gap:clamp(24px,3vh,38px);align-items:center}.intro-copy{width:min(100%,610px);justify-self:end;font-size:clamp(14px,1vw,17px);line-height:1.42}.intro-copy p{margin:0 0 1.22em;text-align:justify;text-align-last:left}.intro-copy p:last-child{margin-bottom:0}.intro-copy strong{color:#ffb184}.portrait{position:relative;width:min(22vw,325px);justify-self:start;margin:0;background:#173449;box-shadow:18px 18px 0 rgba(6,30,44,.36)}.portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.portrait:after{content:"ALEX LEFEVRE   CREATIVE DIRECTION / SCHOOL CONTEXT";display:block;padding:8px 10px;background:#102f45;color:var(--paper);font-size:7px;font-weight:900;letter-spacing:.1em;white-space:nowrap}.portrait-note{position:absolute;left:33%;top:100%;width:90%;margin:12px 0 0;color:var(--terra);font-family:"Segoe Print","Bradley Hand",cursive;font-size:clamp(20px,1.7vw,29px);font-weight:700;line-height:1.03;text-align:center;transform:rotate(-2deg)}.intro-quote{position:relative;grid-column:1/-1;width:min(76%,900px);justify-self:center;margin:0;padding:clamp(24px,2.3vw,36px) clamp(40px,4vw,62px);background:var(--ivory);color:#292929;font-family:Georgia,serif;font-style:italic;font-size:clamp(13px,.9vw,16px);line-height:1.34;box-shadow:0 22px 55px rgba(0,0,0,.25)}.intro-quote:before,.intro-quote:after{position:absolute;color:var(--terra);font-family:Georgia,serif;font-style:normal;font-size:clamp(64px,5vw,88px);font-weight:900;line-height:.5}.intro-quote:before{content:"“";left:-24px;top:-8px}.intro-quote:after{content:"”";right:-22px;bottom:-25px}.intro-quote p{margin:0 0 8px;text-align:justify;text-align-last:left}.intro-quote strong{display:block;margin:8px 0;color:var(--terra);text-align:center;text-transform:uppercase}.intro-quote .culture{margin:0;text-align:center;text-align-last:center}.continue{position:absolute;right:32px;bottom:20px;border:0;background:none;color:var(--ivory);font-size:9px;font-weight:950;letter-spacing:.15em;text-transform:uppercase}.continue span{display:inline-grid;place-items:center;width:34px;height:34px;margin-left:10px;border:1px solid rgba(255,255,255,.38);border-radius:50%}
.orbit-panel{background:radial-gradient(circle at 74% 50%,var(--scene-glow,#4d4947),transparent 43%),linear-gradient(110deg,#020b10,#0b2a3b 56%,#173b4d);transition:background .85s var(--ease)}.orbit-layout{width:min(90vw,1320px);height:100%;margin:auto;display:grid;grid-template-rows:auto auto;align-content:center;row-gap:14px}.eyebrow{width:calc((100% - clamp(44px,4.5vw,72px))/2);color:var(--terra);font-size:clamp(16px,1.35vw,24px);font-weight:950;letter-spacing:.11em;line-height:1.15;text-transform:uppercase}.orbit-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,4.5vw,72px);align-items:stretch}.copy-stage,.media-column{position:relative;min-width:0;aspect-ratio:1.55}.copy-stage{display:flex;flex-direction:column}.title-wrap{min-height:0;display:flex;align-items:flex-start;overflow:hidden}.title{margin:0;color:var(--paper);font-size:68px;font-weight:950;letter-spacing:-.035em;line-height:.88;text-transform:uppercase}.title span{display:block;white-space:nowrap}.copy-bottom{margin-top:auto;display:grid;justify-items:start;gap:18px}.tagline{margin:0;color:rgba(242,236,223,.72);font-size:clamp(9px,.72vw,12px);font-weight:900;letter-spacing:.09em;line-height:1.25;text-transform:uppercase}.read{border:0;padding:15px 21px;background:var(--gold);color:var(--deep);font-size:9px;font-weight:950;letter-spacing:.15em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}.media-column{display:grid;place-items:center}.orbit-decoration{position:absolute;z-index:0;left:50%;top:50%;width:122%;aspect-ratio:1.75;transform:translate(-50%,-50%);pointer-events:none}.orbit-ring{position:absolute;inset:17% 3%;border:2px solid rgba(202,125,88,.52);border-radius:50%;box-shadow:0 0 55px rgba(202,125,88,.1),inset 0 0 55px rgba(202,125,88,.08)}.orbit-ring:before,.orbit-ring:after{content:"";position:absolute;inset:10%;border:1px dashed rgba(212,173,85,.28);border-radius:50%}.orbit-ring:after{inset:27%;border-style:solid;opacity:.55}.orbit-logo{position:absolute;left:50%;top:50%;width:112px;aspect-ratio:1;transform:translate(-50%,-50%);background:linear-gradient(145deg,var(--gold),var(--terra));mask:url("/creative-assets/diamond-mysfit.svg") center/contain no-repeat;filter:drop-shadow(0 18px 28px rgba(0,0,0,.38))}.orbit-thumbs{--turn:0deg;position:absolute;inset:0;transform:rotate(var(--turn));transform-origin:center;will-change:transform}.orbit-thumb{--angle:0deg;position:absolute;left:50%;top:50%;width:76px;aspect-ratio:1.55;border:1px solid rgba(255,255,255,.25);border-radius:9px;background:var(--thumb,#17384a);opacity:.12;filter:blur(25px);transform:translate(-50%,-50%) rotate(var(--angle)) translateX(min(20vw,295px)) rotate(calc((var(--angle) + var(--turn)) * -1));transition:opacity .4s,filter .4s,scale .4s}.orbit-thumb:nth-child(1){--angle:0deg}.orbit-thumb:nth-child(2){--angle:72deg}.orbit-thumb:nth-child(3){--angle:144deg}.orbit-thumb:nth-child(4){--angle:216deg}.orbit-thumb:nth-child(5){--angle:288deg}.orbit-thumb.is-active{opacity:.62;filter:blur(1px);scale:1.18}.media-stack{position:relative;z-index:2;width:100%;height:100%}.media-card{position:absolute;inset:0;margin:0;overflow:hidden;border-radius:22px;background:#102d3d;box-shadow:0 34px 74px rgba(0,0,0,.46),0 0 0 1px rgba(212,173,85,.48);opacity:0;visibility:hidden;pointer-events:none}.media-card.is-active{opacity:1;visibility:visible;pointer-events:auto}.media-card:before{content:attr(data-label);position:absolute;z-index:3;left:24px;top:22px;color:white;font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.media-card:after{content:attr(data-media);position:absolute;z-index:3;left:24px;bottom:20px;color:rgba(255,255,255,.72);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.media-art{position:absolute;inset:0;background:var(--art)}.media-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(4,20,29,.86))}.media-card:nth-child(1){--art:linear-gradient(135deg,#17384a 0 42%,#ca7d58 43% 68%,#102d3d 69%)}.media-card:nth-child(2){--art:linear-gradient(135deg,#14213d 0 28%,#f2ecdf 29% 36%,#b38e4c 37% 67%,#14213d 68%)}.media-card:nth-child(3){--art:linear-gradient(155deg,#28233f 0 25%,#f2ecdf 26% 32%,#969746 33% 70%,#201d3c 71%)}.media-card:nth-child(4){--art:radial-gradient(circle at 68% 45%,#74a048 0 21%,transparent 22%),linear-gradient(135deg,#4a315a,#2e233d)}.media-card:nth-child(5){--art:linear-gradient(155deg,#59305d 0 34%,#59cb98 35% 66%,#17384a 67%)}.media-flight{position:fixed!important;z-index:220!important;margin:0!important;visibility:visible!important;pointer-events:none!important;transform-origin:center;will-change:transform,filter,opacity}.media-card.is-flight-source{visibility:hidden!important}
.contact{background:radial-gradient(circle at 30% 50%,rgba(202,125,88,.14),transparent 38%),linear-gradient(115deg,#061e2c,#020a0f)}.contact-layout{width:min(82vw,1160px);height:100%;margin:auto;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(50px,6vw,100px);align-items:center}.contact-copy small{color:var(--terra);font-size:clamp(16px,1.35vw,24px);font-weight:950;letter-spacing:.15em;text-transform:uppercase}.contact-copy h2{margin:18px 0 24px;font-size:clamp(42px,5vw,72px);line-height:.87;text-transform:uppercase}.contact-copy p{max-width:470px;color:rgba(255,255,255,.7);font-size:14px;line-height:1.5;text-align:justify;text-align-last:left}.contact-hand{margin-top:30px;color:var(--terra);font-family:"Segoe Print","Bradley Hand",cursive;font-size:clamp(22px,2.2vw,34px);transform:rotate(-2deg)}.contact-card{padding:clamp(28px,3vw,46px);background:var(--ivory);color:var(--ink);box-shadow:22px 22px 0 rgba(202,125,88,.16)}.contact-card h3{margin:0 0 8px;font-size:27px;text-transform:uppercase}.contact-card>p{margin:0 0 24px;color:#687b85;font-size:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field.full{grid-column:1/-1}.field label{display:block;margin-bottom:7px;font-size:8px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.field input,.field textarea{width:100%;border:1px solid #ccd1d3;background:white;padding:12px;color:var(--ink)}.field textarea{min-height:86px;resize:vertical}.submit{width:100%;margin-top:16px;border:0;padding:15px;background:var(--terra);color:white;font-size:9px;font-weight:950;letter-spacing:.15em;text-transform:uppercase}
.section-nav{position:fixed;z-index:160;right:18px;top:50%;transform:translateY(-50%);display:grid;gap:7px;padding:8px;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:rgba(4,23,34,.6);backdrop-filter:blur(10px)}.section-nav button{width:34px;height:34px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:transparent;color:rgba(255,255,255,.62);font-size:9px;font-weight:950}.section-nav button.is-active{background:var(--terra);border-color:var(--terra);color:white;box-shadow:0 0 0 4px rgba(202,125,88,.14)}.contact-float{position:fixed;z-index:170;right:18px;top:auto;bottom:18px;width:58px;height:58px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:var(--gold);color:var(--deep);box-shadow:-8px 14px 30px rgba(0,0,0,.4);display:grid;place-items:center}.contact-float svg{width:27px;fill:none;stroke:currentColor;stroke-width:1.8}.contact-float[hidden]{display:none}.scroll-cue{position:fixed;z-index:150;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;color:rgba(242,236,223,.7);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none;animation:scroll-heartbeat 2.2s ease-in-out infinite}.scroll-cue span:last-child{font-size:14px;line-height:1}body:has(.contact.is-current)>.scroll-cue{display:none}@keyframes scroll-heartbeat{0%,9%,18%,100%{transform:translate(-50%,0) scale(1)}4.5%{transform:translate(-50%,3px) scale(1.018)}13.5%{transform:translate(-50%,2.5px) scale(1.012)}}
.detail{position:fixed;z-index:300;inset:0;display:grid;place-items:center;padding:5vw;background:rgba(3,16,24,.82);backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility 0s linear .4s}.detail.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.sheet{position:relative;width:min(820px,92vw);max-height:82vh;overflow:auto;padding:clamp(32px,5vw,64px);background:var(--ivory);color:var(--ink);box-shadow:0 40px 90px rgba(0,0,0,.55)}.close{position:absolute;right:18px;top:18px;width:38px;height:38px;border:0;border-radius:50%;background:var(--ink);color:white}.sheet small{color:var(--terra);font-weight:950;letter-spacing:.14em;text-transform:uppercase}.sheet h2{margin:12px 0 26px;font-size:clamp(30px,4vw,50px);line-height:.95;text-transform:uppercase}.full{line-height:1.55}.sheet ul{padding:20px 20px 20px 38px;background:white;line-height:1.45}.detail-hand{margin-top:26px;color:var(--terra);font-family:"Segoe Print","Bradley Hand",cursive;font-size:clamp(20px,2vw,30px)}
@media(max-width:850px){:root{--header-h:62px}.top{display:grid;grid-template-columns:1fr auto 1fr;padding:0 18px}.brand span,.motto{display:none}.mode-label{max-width:44vw;padding:9px 14px;font-size:7px;white-space:nowrap;overflow:hidden}.intro-layout{position:absolute;inset:0;width:100%;height:100%;padding:clamp(52px,8vh,72px) 7vw 52px;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;gap:16px}.intro-copy{grid-row:1;width:100%;font-size:clamp(10.7px,2.85vw,12px);line-height:1.3}.intro-copy p{margin:0 0 8px;text-align:justify;text-align-last:left}.portrait{grid-row:2;width:42%;justify-self:start;margin:0;box-shadow:9px 9px 0 rgba(6,30,44,.36)}.portrait:after{padding:5px 4px;font-size:3.2px;white-space:normal;line-height:1.1}.portrait-note{left:105%;top:34%;width:125%;margin:0;font-size:clamp(15px,4.2vw,19px);text-align:left}.intro-quote{grid-row:3;width:100%;padding:14px 17px;font-size:clamp(8.7px,2.25vw,10px);line-height:1.18}.intro-quote:before{left:-12px;top:-4px;font-size:48px}.intro-quote:after{right:-12px;bottom:-17px;font-size:48px}.intro-quote p{margin-bottom:4px;text-align:justify;text-align-last:left}.intro-quote strong{margin:4px 0}.continue{right:10px;bottom:8px}.orbit-layout{width:100%;height:100%;padding:clamp(38px,6vh,52px) 7vw 54px;display:grid;grid-template-rows:auto minmax(0,1fr);align-content:stretch;row-gap:12px}.eyebrow{width:100%;font-size:clamp(11px,3.15vw,14px);min-height:30px;display:flex;align-items:flex-start}.orbit-stage{min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,44%) minmax(0,56%);gap:0}.copy-stage{grid-row:1;width:100%;height:100%;aspect-ratio:auto;padding:0;display:flex;flex-direction:column}.title{font-size:36px}.copy-bottom{gap:10px}.tagline{font-size:clamp(7.2px,1.9vw,8.5px)}.read{padding:10px 13px;font-size:7px}.media-column{grid-row:2;width:100%;height:100%;aspect-ratio:auto;align-items:start;padding-top:12px}.media-stack{width:min(78vw,360px);height:auto;aspect-ratio:1.55}.orbit-decoration{width:104vw}.orbit-logo{width:64px}.orbit-thumb{width:48px;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(min(36vw,150px)) rotate(calc((var(--angle) + var(--turn)) * -1))}.section-nav{left:50%;right:auto;top:auto;bottom:max(7px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:4px;padding:5px 7px}.section-nav button{width:25px;height:25px;font-size:7px}.contact-float{right:12px;top:auto;bottom:max(7px,env(safe-area-inset-bottom));width:44px;height:44px}.contact-float svg{width:21px}.contact-layout{width:88vw;height:100%;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px;align-content:center;padding:15px 0 46px}.contact-copy{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(96px,.75fr);grid-template-rows:auto auto auto;column-gap:16px;align-items:start}.contact-copy small{grid-column:1/-1;font-size:11px}.contact-copy h2{grid-column:1;grid-row:2;margin:5px 0 0;font-size:clamp(34px,9.4vw,46px)}.contact-copy p{grid-column:1/-1;grid-row:3;margin:10px 0 0;max-width:100%;font-size:10px;line-height:1.35}.contact-hand{grid-column:2;grid-row:2;align-self:end;margin:0 0 4px;max-width:120px;font-size:clamp(18px,5vw,22px);line-height:1.05}.contact-card{padding:14px 16px}.contact-card h3{font-size:19px}.contact-card>p{margin-bottom:8px;font-size:9px}.form-grid{grid-template-columns:1fr;gap:8px}.field.full{grid-column:1}.field label{font-size:6px;margin-bottom:3px}.field input,.field textarea{padding:8px;font-size:9px}.field textarea{min-height:42px}.submit{margin-top:8px;padding:10px}}
@media(max-width:850px) and (orientation:landscape){.intro-layout{padding:10px 8vw 28px;grid-template-columns:minmax(0,1.25fr) minmax(130px,.75fr);grid-template-rows:minmax(0,1fr) auto;gap:8px 5vw}.intro-copy{grid-column:1;grid-row:1;font-size:clamp(8px,1.15vw,10px);align-self:center}.portrait{grid-column:2;grid-row:1;width:min(22vw,155px);justify-self:center}.portrait-note{left:105%;top:55%;width:75%;font-size:clamp(11px,2vw,15px)}.intro-quote{grid-column:1/-1;grid-row:2;width:72%;padding:8px 20px;font-size:clamp(7px,1vw,8.5px)}.orbit-layout{padding:12px 7vw 18px 5vw;grid-template-rows:auto minmax(0,1fr);row-gap:8px}.eyebrow{width:42%;font-size:clamp(9px,1.55vw,12px);min-height:24px}.orbit-stage{grid-template-columns:minmax(0,42%) minmax(0,58%);grid-template-rows:1fr;gap:3vw}.copy-stage{grid-column:1;grid-row:1}.media-column{grid-column:2;grid-row:1;padding:0;align-items:center}.media-stack{width:min(47vw,360px)}.title{font-size:clamp(21px,3.5vw,31px)}.section-nav{left:auto;right:7px;top:50%;bottom:auto;transform:translateY(-50%);display:grid}.contact-float{right:7px;top:auto;bottom:12px}.contact-layout{width:84vw;height:100%;padding:10px 0 20px;grid-template-columns:.8fr 1.2fr;grid-template-rows:1fr;gap:26px;align-items:center}.contact-copy{display:block}.contact-copy small{font-size:8px}.contact-copy h2{font-size:clamp(28px,5vw,40px)}.contact-copy p{font-size:8px}.contact-hand{font-size:15px}.contact-card{padding:10px 14px}.contact-card h3{font-size:16px}.field input,.field textarea{padding:6px}.field textarea{min-height:34px}.submit{padding:8px}}
@media(max-width:850px){.scroll-cue{bottom:43px;font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.scroll-cue{animation:none}}

body.copyist-creative{margin:0;background:#061e2c;overflow:hidden}.copyist-creative-shell{position:fixed;inset:0;background:#061e2c;color:#f2ecdf}.copyist-panel{position:absolute;inset:0;display:none;overflow:hidden}.copyist-panel.is-current{display:block}.copyist-panel[data-section="1"]{background:#061f2d}.copyist-experience{position:absolute;inset:0;--header-h:0px;background:#061e2c;font-family:Arial,Helvetica,sans-serif;overflow:hidden}.copyist-experience .app{height:100%;display:block}.copyist-experience .top{display:none}.copyist-experience .viewport{height:100%;position:relative;overflow:hidden}.copyist-experience .panel{display:none;position:absolute;inset:0;opacity:1;visibility:visible;pointer-events:auto}.copyist-experience .panel.is-current{display:block}.copyist-section-nav{position:fixed;z-index:120;left:20px;top:50%;transform:translateY(-50%);display:grid;gap:8px}.copyist-section-nav button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(6,30,44,.55);color:#fff;font-size:10px}.copyist-section-nav button.is-active{background:#ca7d58;border-color:#ca7d58}.copyist-creative .mc-nav{z-index:160}.copyist-creative .mc-hero{height:100%;min-height:100%;}.copyist-creative .mc-hero__content{pointer-events:none}.copyist-creative .mc-hero__entry-actions,.copyist-creative .mc-hero__watch,.copyist-creative .mc-hero__scroll{pointer-events:auto}.copyist-film-player{position:absolute;inset:0;z-index:40;background:#020a0f;display:none;align-items:center;justify-content:center}.copyist-film-player.is-open{display:flex}.copyist-film-player video{width:100%;height:100%;object-fit:contain;background:#000}.copyist-film-controls{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:12px;z-index:2}.copyist-film-controls button{border:1px solid rgba(255,255,255,.45);background:rgba(6,30,44,.72);color:#fff;border-radius:999px;padding:10px 16px;text-transform:uppercase;font-size:10px;letter-spacing:.12em}.copyist-experience .media-card:nth-child(1){--art:url('/media/creative/Focus_1/Focus_1.gif') center/cover no-repeat}.copyist-experience .media-card:nth-child(2){--art:url('/media/creative/Focus_2/Focus_2.gif') center/cover no-repeat}.copyist-experience .media-card:nth-child(3){--art:url('/media/creative/Focus_3/Focus_3.gif') center/cover no-repeat}.copyist-experience .media-card:nth-child(4){--art:url('/media/creative/Focus_4/Focus_4.gif') center/cover no-repeat}
.copyist-experience .media-card:nth-child(5){--art:url('/media/creative/Focus_5/Focus_5.png') center/cover no-repeat}
@media(max-width:850px){body.copyist-creative{overflow:hidden}.copyist-section-nav{left:8px;top:auto;bottom:10px;transform:none;grid-auto-flow:column;grid-template-columns:repeat(8,1fr);right:8px;justify-content:center}.copyist-section-nav button{width:28px;height:28px}.copyist-experience .intro-layout{width:100%;padding:74px 20px 58px;display:block;overflow-y:auto}.copyist-experience .intro-copy{width:100%;font-size:13px}.copyist-experience .portrait{width:min(58vw,260px);margin:26px auto 52px}.copyist-experience .intro-quote{width:100%;padding:24px 26px;margin:0 auto 50px;font-size:12px}.copyist-experience .continue{right:18px;bottom:50px}.copyist-experience .orbit-layout{width:100%;padding:78px 18px 62px;display:block;overflow:hidden}.copyist-experience .eyebrow{width:100%;font-size:12px;margin-bottom:12px;padding-left:24px}.copyist-experience .orbit-stage{display:grid;grid-template-columns:1fr;gap:14px}.copyist-experience .copy-stage{aspect-ratio:auto;min-height:33vh;padding-left:24px}.copyist-experience .title-wrap{min-height:0}.copyist-experience .title{font-size:clamp(30px,10vw,44px)!important}.copyist-experience .media-column{aspect-ratio:1.55;margin-left:24px}.copyist-experience .orbit-decoration{display:none}.copyist-experience .media-card{border-radius:16px}.copyist-experience .contact-layout{width:100%;height:100%;padding:80px 20px 62px;display:block;overflow-y:auto}.copyist-experience .contact-copy h2{font-size:40px}.copyist-experience .contact-card{margin-top:26px}.copyist-creative .mc-hero__content{padding-left:24px!important;padding-right:24px!important}.copyist-creative .mc-hero__entry-actions{left:24px!important;right:24px!important;bottom:70px!important}.copyist-creative .mc-hero__scroll{position:static!important}.copyist-creative .mc-scroll-cue{display:none!important}}

/* COPYIST DELTA: restore the original Focus 1–5 aperture-orbit geometry and mobile composition. */
.copyist-experience .title-wrap{flex:1}
.copyist-experience .eyebrow{height:56px;display:flex;align-items:flex-start}
.copyist-experience .title{letter-spacing:-.01em}
.copyist-experience .orbit-decoration{display:block;width:122%}

@media(max-width:850px){
 .copyist-experience .orbit-layout{position:relative;width:100%;height:100%;padding:clamp(38px,6vh,52px) 7vw 54px;display:grid;grid-template-rows:auto minmax(0,1fr);align-content:stretch;row-gap:12px;overflow:visible}
 .copyist-experience .eyebrow{position:relative;z-index:2;width:100%;height:51px;min-height:51px;margin:0;padding:16px 18px 7px;background:rgba(2,11,16,.46);border-radius:14px 14px 0 0;font-size:clamp(11px,3.15vw,14px);display:flex;align-items:flex-start}
 .copyist-experience .orbit-stage{min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,46%) minmax(0,54%);gap:0}
 .copyist-experience .copy-stage{grid-row:1;width:100%;height:100%;aspect-ratio:auto;min-height:0;margin:0;padding:0 18px 16px;background:rgba(2,11,16,.46);border-radius:0 0 14px 14px;display:flex;flex-direction:column}
 .copyist-experience .title-wrap{min-height:0;display:flex;align-items:center;overflow:hidden;flex:1}
 .copyist-experience .title{font-size:36px!important;letter-spacing:-.01em}
 .copyist-experience .copy-bottom{gap:10px}
 .copyist-experience .tagline{font-size:clamp(7.2px,1.9vw,8.5px)}
 .copyist-experience .read{padding:10px 13px;font-size:7px}
 .copyist-experience .media-column{grid-row:2;width:100%;height:100%;aspect-ratio:auto;margin-left:0;padding-top:14px;display:grid;place-items:start center;overflow:visible}
 .copyist-experience .media-stack{width:100%;height:auto;aspect-ratio:1.55;transform:translateY(10%)}
 .copyist-experience .orbit-decoration{display:block;width:104vw}
 .copyist-experience .orbit-logo{width:64px}
 .copyist-experience .orbit-thumb{width:48px;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(min(36vw,150px)) rotate(calc((var(--angle) + var(--turn)) * -1))}
 .copyist-experience .media-card{border-radius:16px}
}
@media(max-width:850px) and (orientation:landscape){
 .copyist-experience .orbit-layout{padding:12px 7vw 18px 5vw;grid-template-rows:auto minmax(0,1fr);row-gap:8px}
 .copyist-experience .eyebrow{position:relative;width:42%;height:24px;min-height:24px;padding:0;background:transparent;border-radius:0;font-size:clamp(9px,1.55vw,12px)}
 .copyist-experience .orbit-stage{grid-template-columns:minmax(0,42%) minmax(0,58%);grid-template-rows:1fr;gap:3vw}
 .copyist-experience .copy-stage{grid-column:1;grid-row:1;padding:0;background:transparent;border-radius:0}
 .copyist-experience .media-column{grid-column:2;grid-row:1;padding:0;align-items:center}
 .copyist-experience .media-stack{width:min(47vw,360px);transform:none}
 .copyist-experience .title{font-size:clamp(21px,3.5vw,31px)!important}
}


/* COPYIST CHECKLIST PASS 2026-09-07: persistent shell navigation, original Creative rail language,
   wider-not-taller Focus typography, and smartphone Section 2 stepped navigation geometry. */
.copyist-creative-shell{--creative-global-nav-h:80px}
.copyist-creative .mc-nav{z-index:260}
.copyist-panel[data-section="2"],
.copyist-panel[data-section="3-7"],
.copyist-panel[data-section="8"]{top:var(--creative-global-nav-h)}

/* Original Creative navigation rail language: dark capsule, outlined circles, terracotta active state. */
.copyist-section-nav{
 position:fixed;z-index:230;left:auto;right:18px;top:50%;bottom:auto;
 transform:translateY(-50%);display:grid;grid-auto-flow:row;grid-template-columns:none;
 gap:7px;padding:8px;border:1px solid rgba(255,255,255,.16);border-radius:28px;
 background:rgba(4,23,34,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.copyist-section-nav button{
 width:34px;height:34px;border:1px solid rgba(255,255,255,.24);border-radius:50%;
 background:transparent;color:rgba(255,255,255,.66);font-size:9px;font-weight:950;
 transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease
}
.copyist-section-nav button.is-active{
 background:#ca7d58;border-color:#ca7d58;color:#fff;box-shadow:0 0 0 4px rgba(202,125,88,.14)
}

/* Contact remains a separate, unmistakable gold action rather than part of the numbered rail. */
.contact-float{
 z-index:240;right:24px;top:96px;bottom:auto;width:58px;height:58px;
 border:1px solid rgba(255,255,255,.55);background:#d4ad55;color:#061e2c;
 box-shadow:-8px 14px 30px rgba(0,0,0,.34)
}

/* Focus title: gain horizontal room without increasing its vertical envelope. */
.copyist-experience .orbit-layout{width:min(94vw,1440px)}
.copyist-experience .orbit-stage{grid-template-columns:minmax(0,1.07fr) minmax(0,1fr);gap:clamp(52px,5vw,82px)}
.copyist-experience .copy-stage{aspect-ratio:auto;height:100%}
.copyist-experience .title{letter-spacing:.012em;line-height:.88}

@media(max-width:850px){
 .copyist-section-nav{
  left:10px;right:72px;top:auto;bottom:max(9px,env(safe-area-inset-bottom));transform:none;
  display:flex;grid-auto-flow:initial;grid-template-columns:none;justify-content:center;
  gap:3px;padding:6px 7px;border-radius:999px
 }
 .copyist-section-nav button{width:clamp(26px,7.8vw,34px);height:clamp(26px,7.8vw,34px);font-size:7px;flex:0 0 auto}
 .contact-float{right:12px;top:auto;bottom:max(7px,env(safe-area-inset-bottom));width:48px;height:48px}
 .contact-float svg{width:22px}

 /* Keep media dimensions stable; widen only the copy measure. */
 .copyist-experience .orbit-layout{width:100%}
 .copyist-experience .orbit-stage{grid-template-columns:1fr;gap:0}
 .copyist-experience .eyebrow{padding-left:10px;padding-right:10px}
 .copyist-experience .copy-stage{padding-left:10px;padding-right:10px}
 .copyist-experience .title{letter-spacing:.012em;line-height:.88}
}

@media(max-width:600px) and (orientation:portrait){
 /* Section 2 has two controlled phone states; JS now tracks the finger directly between them. */
 .copyist-experience .intro-layout{
  overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:auto
 }
 .copyist-experience .intro-layout::-webkit-scrollbar{display:none}
}

@media(max-width:850px) and (orientation:landscape){
 /* Landscape phones/tablets retain the compact right-side rail instead of the portrait bottom rail. */
 .copyist-section-nav{
  left:auto;right:7px;top:50%;bottom:auto;transform:translateY(-50%);display:grid;
  gap:5px;padding:6px;border-radius:24px
 }
 .copyist-section-nav button{width:28px;height:28px;font-size:7px}
 .contact-float{right:7px;top:auto;bottom:12px;width:44px;height:44px}
 .copyist-experience .eyebrow{padding-left:0;padding-right:0}
 .copyist-experience .copy-stage{padding-left:0;padding-right:0}
}

/* ==========================================================================\n   STEP 1/6 — CREATIVE NAVIGATION INTERFACE ONLY\n   Permanent MYSFIT top bar + original 1–8 rail language + independent CTA.\n   No Focus typography, Focus flight, or Section 2 scroll rules in this pass.\n   ========================================================================== */

.copyist-creative-shell{--creative-topbar-h:80px}

/* Permanent MYSFIT site navigation: never belongs to an individual Creative panel. */
body.copyist-creative .mc-nav{
 position:fixed!important;z-index:500!important;inset:0 0 auto!important;height:var(--creative-topbar-h)!important;
 display:block!important;background:rgba(4,23,34,.97)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;
 box-shadow:0 1px 0 rgba(0,0,0,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
body.copyist-creative .mc-nav__inner{height:100%;padding:0 clamp(18px,3vw,48px);display:flex;align-items:center;gap:2rem}
body.copyist-creative .mc-logo{display:flex;align-items:center;flex:0 0 auto}
body.copyist-creative .mc-logo img{display:block;height:42px;width:auto}
body.copyist-creative .mc-nav__links{margin:auto;display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
body.copyist-creative .mc-nav__links a,
body.copyist-creative .mc-nav__links button{
 border:0;background:none;padding:0;color:#fff;text-decoration:none;font-size:.7rem;font-weight:700;
 letter-spacing:.1em;text-transform:uppercase;white-space:nowrap
}
body.copyist-creative .mc-nav__links .is-active{color:#ca7d58!important}
body.copyist-creative .mc-nav__cta{
 display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;
 background:#ca7d58!important;color:#fff!important;text-decoration:none;font-size:.72rem;font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;white-space:nowrap
}

/* Sections 2–8 live below the permanent global bar. Hero remains behind it, as before. */
body.copyist-creative .copyist-panel[data-section="2"],
body.copyist-creative .copyist-panel[data-section="3-7"],
body.copyist-creative .copyist-panel[data-section="8"]{top:var(--creative-topbar-h)!important}

/* Mobile hamburger is a native <details>, so it remains functional without new JS. */
.mc-mobile-nav{display:none;position:relative;margin-left:auto}
.mc-mobile-nav summary{list-style:none;display:grid;align-content:center;gap:6px;width:48px;height:48px;padding:8px;cursor:pointer}
.mc-mobile-nav summary::-webkit-details-marker{display:none}
.mc-mobile-nav summary span{display:block;width:32px;height:4px;margin:auto;border-radius:999px;background:#fff}
.mc-mobile-nav__panel{
 position:fixed;z-index:510;left:12px;right:12px;top:calc(var(--creative-topbar-h) - 1px);
 padding:12px 18px 18px;border:1px solid rgba(255,255,255,.12);border-top:0;
 background:rgba(4,23,34,.985);box-shadow:0 20px 45px rgba(0,0,0,.34);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)
}
.mc-mobile-nav__panel a{display:block;padding:11px 4px;color:#fff;text-decoration:none;font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.mc-mobile-nav__panel a.is-active{color:#ca7d58}
.mc-mobile-nav__panel .mc-mobile-nav__cta{margin-top:8px;padding:13px 14px;background:#ca7d58;color:#fff;text-align:center}

/* Old Creative 1–8 navigation rail language, adapted to the copyist shell. */
body.copyist-creative .copyist-section-nav{
 position:fixed!important;z-index:470!important;left:auto!important;right:18px!important;top:50%!important;bottom:auto!important;
 transform:translateY(-50%)!important;display:grid!important;grid-auto-flow:row!important;grid-template-columns:none!important;
 gap:7px!important;padding:8px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:28px!important;
 background:rgba(4,23,34,.60)!important;box-shadow:none!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
body.copyist-creative .copyist-section-nav button{
 width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;
 border:1px solid rgba(255,255,255,.24)!important;border-radius:50%!important;background:transparent!important;
 color:rgba(255,255,255,.62)!important;font-size:9px!important;font-weight:950!important;line-height:1!important;
 display:grid!important;place-items:center!important;box-shadow:none!important
}
body.copyist-creative .copyist-section-nav button.is-active{
 background:#ca7d58!important;border-color:#ca7d58!important;color:#fff!important;
 box-shadow:0 0 0 4px rgba(202,125,88,.14)!important
}

/* Contact CTA is independent from the rail. Desktop: directly below it, not floating near the header. */
body.copyist-creative .contact-float{
 position:fixed!important;z-index:480!important;right:18px!important;left:auto!important;top:calc(50% + 184px)!important;bottom:auto!important;
 width:58px!important;height:58px!important;padding:0!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important;
 background:#d4ad55!important;color:#061e2c!important;box-shadow:-8px 14px 30px rgba(0,0,0,.38)!important;
 display:grid!important;place-items:center!important
}
body.copyist-creative .contact-float svg{width:27px!important;height:27px!important;fill:none;stroke:currentColor;stroke-width:1.8}
body.copyist-creative .contact-float[hidden]{display:none!important}

@media(max-width:1100px){
 body.copyist-creative .mc-nav__links,body.copyist-creative .mc-nav__cta{display:none!important}
 body.copyist-creative .mc-mobile-nav{display:block}
}

@media(max-width:850px) and (orientation:portrait){
 /* Match the old smartphone bottom capsule: 8 compact circles + separate gold CTA. */
 body.copyist-creative .copyist-section-nav{
  left:50%!important;right:auto!important;top:auto!important;bottom:max(7px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;display:flex!important;grid-auto-flow:initial!important;grid-template-columns:none!important;
  gap:4px!important;padding:5px 7px!important;border-radius:28px!important;width:max-content!important;max-width:calc(100vw - 68px)!important
 }
 body.copyist-creative .copyist-section-nav button{
  width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;font-size:7px!important;flex:0 0 25px!important
 }
 body.copyist-creative .contact-float{
  right:12px!important;top:auto!important;bottom:max(7px,env(safe-area-inset-bottom))!important;
  width:44px!important;height:44px!important
 }
 body.copyist-creative .contact-float svg{width:21px!important;height:21px!important}
}

@media(max-width:360px) and (orientation:portrait){
 /* At 320–360px, anchor the rail left so it cannot collide with the independent CTA. */
 body.copyist-creative .copyist-section-nav{left:8px!important;transform:none!important}
 body.copyist-creative .copyist-section-nav button{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;flex-basis:23px!important}
}

@media(max-width:850px) and (orientation:landscape){
 body.copyist-creative .copyist-section-nav{
  left:auto!important;right:7px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
  display:grid!important;gap:5px!important;padding:6px!important;border-radius:24px!important;width:auto!important
 }
 body.copyist-creative .copyist-section-nav button{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;font-size:7px!important}
 body.copyist-creative .contact-float{right:7px!important;top:auto!important;bottom:12px!important;width:44px!important;height:44px!important}
}

/* ==========================================================================
   STEP 2/6 — FOCUS TYPOGRAPHY + COPY PROPORTIONS ONLY
   Restore the pre-copyist Creative Focus typography without touching the
   media tile, navigation controls, Focus flight logic, or Section 2 scrolling.
   ========================================================================== */

/*
 * Forensic correction:
 * The legacy Creative experience inherited Arial/Helvetica for its Focus UI.
 * The copyist site's global h1 rule forces Bebas Neue Pro, which makes the
 * Focus title dramatically narrower. Restore the original type family here.
 */
body.copyist-creative .copyist-experience .orbit-panel,
body.copyist-creative .copyist-experience .orbit-panel button{
 font-family:Arial,Helvetica,sans-serif
}
body.copyist-creative .copyist-experience .title{
 font-family:Arial,Helvetica,sans-serif!important;
 font-weight:950!important;
 letter-spacing:.005em!important;
 line-height:.88!important;
 transform:none!important;
}
body.copyist-creative .copyist-experience .eyebrow,
body.copyist-creative .copyist-experience .tagline,
body.copyist-creative .copyist-experience .read{
 font-family:Arial,Helvetica,sans-serif!important;
 font-weight:950!important
}

/* Desktop/tablet landscape: widen the COPY envelope only. The grid track and
   media column remain untouched, so the approved tile size is preserved. */
@media(min-width:851px){
 body.copyist-creative .copyist-experience .copy-stage{
  width:112%;max-width:none;overflow:visible;z-index:3
 }
 body.copyist-creative .copyist-experience .title-wrap{overflow:visible}
 body.copyist-creative .copyist-experience .eyebrow{
  width:56%;max-width:none
 }
}

/* Smartphone portrait: give the title a little more lateral measure while
   leaving the media column exactly where the current rebuild puts it. */
@media(max-width:850px) and (orientation:portrait){
 body.copyist-creative .copyist-experience .copy-stage{
  width:calc(100% + 4vw);max-width:none;margin-left:-2vw;margin-right:-2vw
 }
 body.copyist-creative .copyist-experience .title-wrap{overflow:visible}
 body.copyist-creative .copyist-experience .title{
  letter-spacing:.005em!important;line-height:.88!important
 }
 body.copyist-creative .copyist-experience .eyebrow{
  width:calc(100% + 4vw);max-width:none;margin-left:-2vw;margin-right:-2vw
 }
}

/* Landscape mobile/tablet keeps the established 42/58 composition. Only the
   type family/width treatment changes; media geometry remains untouched. */
@media(max-width:850px) and (orientation:landscape){
 body.copyist-creative .copyist-experience .copy-stage{
  width:108%;max-width:none;margin-left:0;overflow:visible;z-index:3
 }
 body.copyist-creative .copyist-experience .title-wrap{overflow:visible}
}


/* ==========================================================================
   STEP 4.1/6 — SMARTPHONE SECTION 2 NATIVE SCROLL + CLEAN BOUNDARY
   Section 2 is a genuine scroll surface: finger movement and momentum are owned
   by the browser. JS only watches for an EXTRA gesture at the real top/bottom.
   ========================================================================== */
@media(max-width:600px) and (orientation:portrait){
 body.copyist-creative .copyist-panel[data-section="2"] .intro-layout{
  overflow-y:auto!important;
  touch-action:pan-y!important;
  overscroll-behavior-y:contain!important;
  scroll-behavior:auto!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important
 }
 body.copyist-creative .copyist-panel[data-section="2"] .intro-layout::-webkit-scrollbar{display:none!important}
}


/* ==========================================================================
   STEP 5/6 — SMARTPHONE FOCUS REVERSE NAV + 1 <-> 2 BOUNDARY
   Focus owns vertical touch gestures on phone so browser pull-to-refresh cannot
   steal reverse navigation. Section 2 keeps its native free-scroll behavior.
   ========================================================================== */
@media(max-width:600px) and (orientation:portrait){
 body.copyist-creative .copyist-panel[data-section="3-7"]{
  touch-action:none!important;
  overscroll-behavior-y:none!important;
  -webkit-user-select:none;
  user-select:none
 }
 /* Keep actual controls tappable even though the Focus surface owns swipes. */
 body.copyist-creative .copyist-panel[data-section="3-7"] button,
 body.copyist-creative .copyist-panel[data-section="3-7"] a{
  touch-action:manipulation!important
 }
}

/* ==========================================================================
   STEP 7 — POLISH BATCH 1
   7B: Section 2 opening-line emphasis.
   7C: Smartphone Focus 1–5 unified centered composition and hard title fitting.
   ========================================================================== */

/* Section 2: opening statement carries the same bold emphasis as the closing
   terracotta statement, but intentionally remains ivory/white. */
body.copyist-creative .copyist-experience .intro-copy p:first-child{
 font-weight:700;
}

@media(max-width:600px) and (orientation:portrait){
 /* One virtual Focus composition, centered inside the usable phone viewport:
    below the fixed MYSFIT bar and above the numbered rail/contact CTA. */
 body.copyist-creative .copyist-experience .orbit-layout{
  width:min(calc(100vw - 32px),520px)!important;
  height:100%!important;
  margin:0 auto!important;
  padding:clamp(16px,2.2vh,24px) 0 max(80px,calc(72px + env(safe-area-inset-bottom)))!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  row-gap:0!important;
  overflow:visible!important;
 }

 /* Eyebrow and title are visually one card. Remove the dead band between them. */
 body.copyist-creative .copyist-experience .eyebrow{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:12px 12px 3px!important;
  border-radius:14px 14px 0 0!important;
  align-items:flex-start!important;
 }
 body.copyist-creative .copyist-experience .orbit-stage{
  width:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto!important;
  gap:clamp(14px,2vh,20px)!important;
 }
 body.copyist-creative .copyist-experience .copy-stage{
  grid-row:1!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0 12px 14px!important;
  border-radius:0 0 14px 14px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
 }
 body.copyist-creative .copyist-experience .title-wrap{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:flex-start!important;
 }
 body.copyist-creative .copyist-experience .title{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  letter-spacing:.005em!important;
  line-height:.88!important;
  overflow:hidden!important;
 }
 body.copyist-creative .copyist-experience .title span{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  white-space:nowrap!important;
 }
 body.copyist-creative .copyist-experience .copy-bottom{
  margin-top:12px!important;
  gap:10px!important;
 }

 /* Title card and image card now share exactly the same horizontal measure. */
 body.copyist-creative .copyist-experience .media-column{
  grid-row:2!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
 }
 body.copyist-creative .copyist-experience .media-stack{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:1.55!important;
  margin:0!important;
  transform:none!important;
 }
}


/* ==========================================================================
   STEP 7 — POLISH BATCH 2
   7D: Section 2 opening line matches the closing terracotta emphasis.
   7E: Page 8 reverse swipe restored without breaking form scrolling.
   7F: One common Focus title scale, calibrated to Page 4 / Focus 2.
   ========================================================================== */

/* Section 2 opening and closing emphasis now belong to the same visual voice. */
body.copyist-creative .copyist-experience .intro-copy p:first-child{
 color:#ffb184!important;
 font-weight:700!important;
}

/* On Page 8, preserve native form/content scrolling while containing Safari's
   page-level overscroll. JS owns only a reverse pull that starts at the top. */
@media(max-width:600px) and (orientation:portrait){
 body.copyist-creative .copyist-panel[data-section="8"]{
  overscroll-behavior-y:none!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-layout{
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
 }
}

/* Title size itself is set by fitTitle() from the Focus 2 reference line.
   These rules preserve the exact shared ratio/leading across all Focus pages. */
body.copyist-creative .copyist-experience .title{
 line-height:.88!important;
 letter-spacing:.005em!important;
}


/* ==========================================================================\n   STEP 8A — PERSISTENT CREATIVE FILM BACKDROP + ORIGINAL HERO FILM GEOMETRY\n   The old React hero kept its film atmosphere alive behind the Page 1 -> 2\n   transition. In the copyist build the same idea is a single persistent layer\n   owned by the Creative shell, so it never restarts between those pages.\n   ========================================================================== */
body.copyist-creative .copyist-creative-shell{isolation:isolate;background:#304e6b}
body.copyist-creative .creative-film-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;background:#304e6b;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),visibility 0s linear .7s}
body.copyist-creative .copyist-creative-shell.is-film-backdrop-visible .creative-film-backdrop{opacity:1;visibility:visible;transition-delay:0s}
body.copyist-creative .creative-film-backdrop__video{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:center center;background:#061f2d;mix-blend-mode:multiply;will-change:opacity,transform;transition:opacity .85s cubic-bezier(.4,0,.2,1),filter .85s cubic-bezier(.4,0,.2,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
body.copyist-creative .creative-film-backdrop__video--main{z-index:0;opacity:.70;filter:saturate(.9) contrast(1.04);transform:scale(1.01)}
body.copyist-creative .creative-film-backdrop__video--projection{z-index:1;opacity:0;filter:blur(clamp(4px,.45vw,8px)) saturate(.78) contrast(1.03);transform:scale(1.055)}
body.copyist-creative .copyist-creative-shell.is-film-projection-active .creative-film-backdrop__video--main{opacity:0;transform:scale(1.02)}
body.copyist-creative .copyist-creative-shell.is-film-projection-active .creative-film-backdrop__video--projection{opacity:.70;transform:scale(1.045)}
body.copyist-creative .creative-film-backdrop__wash{position:absolute;inset:0;z-index:2;background:rgba(6,31,45,.08);pointer-events:none}

/* Panels stay above the persistent film layer. Page 1 and Page 2 deliberately\n   remain translucent; Focus and Contact keep their own opaque surfaces. */
body.copyist-creative .copyist-panel{z-index:2}
body.copyist-creative .copyist-panel[data-section="1"]{background:transparent!important}
body.copyist-creative .copyist-panel[data-section="1"] .mc-hero{background:transparent!important}
body.copyist-creative .copyist-panel[data-section="1"] .mc-hero__wash{z-index:1;pointer-events:none}
body.copyist-creative .copyist-panel[data-section="1"] .mc-hero__content,
body.copyist-creative .copyist-panel[data-section="1"] .mc-hero__entry-actions,
body.copyist-creative .copyist-panel[data-section="1"] .mc-scroll-cue{position:absolute;z-index:3}
body.copyist-creative .copyist-panel[data-section="2"] .copyist-experience{background:transparent!important}
body.copyist-creative .copyist-panel[data-section="2"] .intro{background:radial-gradient(circle at 76% 34%,rgba(202,125,88,.18),transparent 36%),linear-gradient(115deg,rgba(2,10,15,.90),rgba(11,42,59,.78) 48%,rgba(48,78,107,.62))!important}

/* Keep the exact old editorial title construction: fixed authored line breaks,\n   terracotta final two lines, and the old tight vertical ratio. */
body.copyist-creative .mc-hero__content h1{display:flex;flex-direction:column;align-items:flex-start;gap:.12em;line-height:.76;letter-spacing:-.018em;text-transform:uppercase}
body.copyist-creative .mc-hero__content h1>span,
body.copyist-creative .mc-hero__content h1 em span{display:block;white-space:nowrap}
body.copyist-creative .mc-hero__content h1 em{display:contents;color:#c47c52}

/* 8A foreground player geometry. Desktop/landscape keeps the large cinematic\n   stage. Phone portrait restores the old bottom-anchored 16:9 tile. The loved\n   MYSFIT media bar itself is intentionally deferred to Step 8B. */
body.copyist-creative .copyist-film-player{z-index:40}
@media (orientation:portrait) and (max-width:850px){
 body.copyist-creative .copyist-film-player{display:block;position:absolute;left:0;right:0;top:auto;bottom:var(--player-bottom-gap,clamp(.65rem,1.45svh,1rem));width:100%;height:auto;aspect-ratio:16/9;overflow:visible;background:#061f2d;box-shadow:0 -1.5rem 4.5rem rgba(0,0,0,.76);opacity:0;visibility:hidden;transform:translateY(calc(100% + 2rem));transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .55s ease,visibility 0s linear .8s}
 body.copyist-creative .copyist-film-player:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-18svh;height:18svh;background:linear-gradient(to top,rgba(0,0,0,.72),transparent);pointer-events:none}
 body.copyist-creative .copyist-film-player.is-open{display:block;opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
 body.copyist-creative .copyist-film-player video{display:block;width:100%;height:100%;object-fit:contain;background:#061f2d}
 body.copyist-creative .copyist-film-controls{bottom:0;padding-bottom:max(.45rem,env(safe-area-inset-bottom))}
}


/* ==========================================================================
   STEP 8A.1 — PAGE 1 FILM COMPOSITION CLEANUP
   Page 1 intentionally carries no numbered Creative rail or floating Contact
   CTA. Both return from Page 2 onward. The permanent MYSFIT top bar is untouched.
   ========================================================================== */
body.copyist-creative .copyist-section-nav[hidden]{display:none!important}


/* ==========================================================================
   STEP 8B — MYSFIT MEDIA BAR + FOUR-FILM PLAYER
   Balanced three-zone controller inspired by the owner-approved old media bar
   and the current Creative navigation chassis. Fullscreen behavior is Step 8C.
   ========================================================================== */
body.copyist-creative .copyist-film-player{--media-navy:rgba(4,23,34,.48);--media-navy-engaged:rgba(4,23,34,.78);--media-line:rgba(242,236,223,.34);--media-ivory:#f2ecdf;--media-terra:#ca7d58;overflow:hidden}
body.copyist-creative .copyist-film-stage{position:absolute;inset:0;overflow:hidden;background:#061f2d}
body.copyist-creative .copyist-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#061f2d;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s;will-change:opacity}
body.copyist-creative .copyist-film-video.is-active{opacity:1;visibility:visible;transition-delay:0s}
body.copyist-creative .copyist-media-bar{--media-dock-y:0px;--media-peek:14px;position:absolute;z-index:8;left:50%;bottom:max(14px,env(safe-area-inset-bottom));width:min(calc(100% - 28px),1120px);min-height:70px;transform:translate3d(-50%,0,0);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:24px;background:var(--media-navy);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 44px rgba(0,0,0,.28);opacity:1;will-change:transform,opacity;transition:background-color .32s ease,border-color .32s ease}
body.copyist-creative .copyist-media-bar.is-engaged,body.copyist-creative .copyist-film-player.is-switching .copyist-media-bar{opacity:1;background:var(--media-navy);border-color:rgba(255,255,255,.16)}
body.copyist-creative .copyist-media-bar.is-docked{transform:translate3d(-50%,var(--media-dock-y),0);opacity:.62;cursor:pointer;touch-action:manipulation}
body.copyist-creative .copyist-media-bar.is-docked>*{pointer-events:none}
body.copyist-creative .copyist-media-bar.is-docked:after{content:"";position:absolute;z-index:12;left:0;right:0;top:calc(var(--media-peek) - 44px);height:44px;background:transparent;pointer-events:auto;cursor:pointer}
body.copyist-creative .copyist-film-player.is-media-clipping{overflow:hidden!important}
body.copyist-creative .copyist-media-zone{display:flex;align-items:center;gap:10px;min-width:0}
body.copyist-creative .copyist-media-zone--left{justify-self:start}
body.copyist-creative .copyist-media-zone--right{justify-self:end}
body.copyist-creative .copyist-media-centre{display:grid;place-items:center;justify-self:center}
body.copyist-creative .copyist-media-bar button{appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;background:none;color:var(--media-ivory);font:inherit;outline:none}
body.copyist-creative .copyist-media-round{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border:1px solid var(--media-line)!important;border-radius:50%!important;background:rgba(6,31,45,.24)!important;transition:background-color .2s ease,border-color .2s ease,transform .2s ease,color .2s ease}
body.copyist-creative .copyist-media-round:hover,body.copyist-creative .copyist-media-round:focus-visible{background:rgba(202,125,88,.22)!important;border-color:rgba(202,125,88,.78)!important;transform:scale(1.04)}
body.copyist-creative .copyist-media-round svg{width:21px;height:21px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.copyist-creative .copyist-media-track svg{fill:currentColor;stroke:none;width:20px;height:20px}
body.copyist-creative .copyist-media-play{width:54px;height:54px;flex-basis:54px;border-color:rgba(255,255,255,.48)!important;background:rgba(6,31,45,.52)!important;box-shadow:0 0 0 4px rgba(255,255,255,.035)}
body.copyist-creative .copyist-media-play svg{width:24px;height:24px;fill:currentColor;stroke:none}
body.copyist-creative .copyist-media-play .pause-glyph{display:none}
body.copyist-creative .copyist-film-player.is-playing .copyist-media-play .play-glyph{display:none}
body.copyist-creative .copyist-film-player.is-playing .copyist-media-play .pause-glyph{display:block}
body.copyist-creative .copyist-media-sound .sound-slash{display:none}
body.copyist-creative .copyist-film-player.is-muted .copyist-media-sound .sound-wave{display:none}
body.copyist-creative .copyist-film-player.is-muted .copyist-media-sound .sound-slash{display:block}
body.copyist-creative .copyist-media-back{height:48px;display:flex!important;align-items:center;gap:9px;padding:0 12px 0 8px!important;border-radius:999px!important;border:1px solid transparent!important;color:var(--media-ivory)!important;font-size:9px!important;font-weight:900!important;letter-spacing:.11em!important;text-transform:uppercase;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease}
body.copyist-creative .copyist-media-back:hover,body.copyist-creative .copyist-media-back:focus-visible{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.16)!important}
body.copyist-creative .copyist-media-back svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.copyist-creative .copyist-film-count{display:inline-block;min-width:62px;color:var(--media-ivory);font-size:11px;font-weight:900;letter-spacing:.16em;text-align:center;white-space:nowrap}
body.copyist-creative .copyist-film-player.is-switching .copyist-film-count{color:#d4ad55}
body.copyist-creative .copyist-media-bar button:disabled{opacity:.4;cursor:wait;transform:none!important}

@media(max-width:850px) and (orientation:portrait){
 body.copyist-creative .copyist-film-player{overflow:visible}
 body.copyist-creative .copyist-film-stage{inset:0;overflow:hidden}
 body.copyist-creative .copyist-film-video{object-fit:contain}
 body.copyist-creative .copyist-media-bar{--media-peek:12px;bottom:max(6px,env(safe-area-inset-bottom));width:calc(100% - 12px);min-height:48px;gap:4px;padding:5px 6px;border-radius:20px}
 body.copyist-creative .copyist-media-zone{gap:4px}
 body.copyist-creative .copyist-media-round{width:34px;height:34px;flex-basis:34px}
 body.copyist-creative .copyist-media-round svg{width:16px;height:16px}
 body.copyist-creative .copyist-media-play{width:38px;height:38px;flex-basis:38px}
 body.copyist-creative .copyist-media-play svg{width:18px;height:18px}
 body.copyist-creative .copyist-media-back{height:34px;gap:4px;padding:0 3px!important;font-size:6.5px!important;letter-spacing:.08em!important}
 body.copyist-creative .copyist-media-back svg{width:18px;height:18px}
 body.copyist-creative .copyist-film-count{min-width:46px;font-size:7.5px;letter-spacing:.1em}
}
@media(max-width:350px) and (orientation:portrait){
 body.copyist-creative .copyist-media-bar{width:calc(100% - 8px);gap:2px;padding-inline:4px}
 body.copyist-creative .copyist-media-zone{gap:2px}
 body.copyist-creative .copyist-media-round{width:31px;height:31px;flex-basis:31px}
 body.copyist-creative .copyist-media-play{width:35px;height:35px;flex-basis:35px}
 body.copyist-creative .copyist-media-back span{display:none}
 body.copyist-creative .copyist-media-back{width:31px;padding:0!important;justify-content:center}
 body.copyist-creative .copyist-film-count{min-width:38px;font-size:6.8px}
}
@media(max-width:850px) and (orientation:landscape){
 body.copyist-creative .copyist-media-bar{--media-peek:12px;bottom:max(8px,env(safe-area-inset-bottom));width:min(calc(100% - 20px),900px);min-height:52px;padding:6px 10px;border-radius:20px}
 body.copyist-creative .copyist-media-round{width:38px;height:38px;flex-basis:38px}
 body.copyist-creative .copyist-media-play{width:42px;height:42px;flex-basis:42px}
 body.copyist-creative .copyist-media-back{height:38px;font-size:7px!important}
 body.copyist-creative .copyist-film-count{font-size:8px;min-width:50px}
}

/* 8B.1 — /creative shell owns the viewport. Suppress the global site scrollbar
   without touching Section 2's dedicated native .intro-layout scroller. */
html{width:100%;height:100%;overflow:hidden!important;scrollbar-width:none!important;-ms-overflow-style:none}
body.copyist-creative,.copyist-creative-shell,.copyist-panel[data-section="1"],.copyist-panel[data-section="1"] .mc-hero{scrollbar-width:none!important;-ms-overflow-style:none}
html::-webkit-scrollbar,body.copyist-creative::-webkit-scrollbar,.copyist-creative-shell::-webkit-scrollbar,.copyist-panel[data-section="1"]::-webkit-scrollbar,.copyist-panel[data-section="1"] .mc-hero::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}


/* ==========================================================================
   STEP 8C — TRUE FULLSCREEN + BACKDROP OVERSCAN FIX
   The global site reset applies max-width:100% to all video elements. The
   Creative backdrop intentionally overscans to 106%, so it must opt out or the
   rightmost 3% of the navy parent becomes visible as a false margin.
   ========================================================================== */
body.copyist-creative .creative-film-backdrop__video{max-width:none!important}

/* Standard Fullscreen API: the wrapper owns fullscreen so the same MYSFIT
   Media Bar remains available above the active film. The class mirrors the
   pseudo-state for engines that update layout one frame after the event. */
body.copyist-creative .copyist-film-player:fullscreen,
body.copyist-creative .copyist-film-player:-webkit-full-screen,
body.copyist-creative .copyist-film-player.is-fullscreen{
 position:fixed!important;
 inset:0!important;
 left:0!important;
 right:0!important;
 top:0!important;
 bottom:0!important;
 width:100vw!important;
 max-width:none!important;
 height:100vh!important;
 height:100dvh!important;
 max-height:none!important;
 aspect-ratio:auto!important;
 display:block!important;
 overflow:hidden!important;
 opacity:1!important;
 visibility:visible!important;
 transform:none!important;
 transition:none!important;
 border-radius:0!important;
 box-shadow:none!important;
 background:#020a0f!important;
}
body.copyist-creative .copyist-film-player:fullscreen:before,
body.copyist-creative .copyist-film-player:-webkit-full-screen:before,
body.copyist-creative .copyist-film-player.is-fullscreen:before{display:none!important}
body.copyist-creative .copyist-film-player:fullscreen .copyist-film-stage,
body.copyist-creative .copyist-film-player:-webkit-full-screen .copyist-film-stage,
body.copyist-creative .copyist-film-player.is-fullscreen .copyist-film-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
body.copyist-creative .copyist-film-player:fullscreen .copyist-film-video,
body.copyist-creative .copyist-film-player:-webkit-full-screen .copyist-film-video,
body.copyist-creative .copyist-film-player.is-fullscreen .copyist-film-video{
 width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;background:#020a0f!important
}
body.copyist-creative .copyist-film-player:fullscreen .copyist-media-bar,
body.copyist-creative .copyist-film-player:-webkit-full-screen .copyist-media-bar,
body.copyist-creative .copyist-film-player.is-fullscreen .copyist-media-bar{
 bottom:max(16px,env(safe-area-inset-bottom))!important;
 width:min(calc(100% - 32px),1120px)!important;
 max-width:1120px!important;
}

@media(max-width:850px) and (orientation:landscape){
 body.copyist-creative .copyist-film-player:fullscreen .copyist-media-bar,
 body.copyist-creative .copyist-film-player:-webkit-full-screen .copyist-media-bar,
 body.copyist-creative .copyist-film-player.is-fullscreen .copyist-media-bar{
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  width:min(calc(100% - 20px),900px)!important;
 }
}


/* ==========================================================================
   STEP 8D — FINAL CREATIVE VIDEO HARDENING
   Smartphone Page 1 regains the owner-approved scroll cue beneath the two CTAs.
   The cue is informational only and disappears while the foreground film is open.
   ========================================================================== */
@media(max-width:850px) and (orientation:portrait){
 body.copyist-creative .copyist-panel[data-section="1"] .mc-scroll-cue{
  display:flex!important;
  position:absolute!important;
  z-index:6!important;
  left:50%!important;
  top:auto!important;
  bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))!important;
  transform:translateX(-50%)!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.5rem!important;
  color:rgba(248,245,240,.72)!important;
  font-size:clamp(.45rem,1.65vw,.56rem)!important;
  font-weight:600!important;
  letter-spacing:.15em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  opacity:1!important;
  visibility:visible!important;
  animation:mc-scroll-heartbeat 2.2s ease-in-out infinite!important;
 }
 body.copyist-creative .copyist-panel[data-section="1"] .mc-scroll-cue span:last-child{
  font-size:.9rem;
  line-height:1;
 }
 body.copyist-creative .copyist-panel[data-section="1"] .mc-hero.is-film-active .mc-scroll-cue{
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
 }
}
@media(prefers-reduced-motion:reduce){
 body.copyist-creative .copyist-panel[data-section="1"] .mc-scroll-cue{animation:none!important}
}


/* ==========================================================================
   STEP 8E — PLAYBACK TIMING + AV FADES
   The active foreground film follows the playback-state opacity variable so
   Play/Resume can fade in over 2s and Pause/Go Back can fade out over 2s.
   Inactive double-buffer slots remain hard-hidden by their base rule.
   ========================================================================== */
body.copyist-creative .copyist-film-player .copyist-film-video.is-active{
 opacity:var(--film-playback-opacity,1);
 transition:opacity var(--film-playback-fade,.22s) ease,visibility 0s linear 0s;
}

/* ==========================================================================\n   CREATIVE MOBILE POLISH — Page 2 context note + single-viewport Contact\n   Desktop/landscape geometry remains untouched.\n   ========================================================================== */
@media(max-width:600px) and (orientation:portrait){
 /* Page 2: keep the handwritten context line attached to the portrait instead
    of allowing the desktop-side placement to escape the phone viewport. */
 body.copyist-creative .copyist-panel[data-section="2"] .portrait{
  margin-bottom:clamp(78px,10dvh,96px)!important;
 }
 body.copyist-creative .copyist-panel[data-section="2"] .portrait-note{
  position:absolute!important;
  left:50%!important;
  top:calc(100% + 14px)!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  font-size:clamp(17px,5vw,22px)!important;
  line-height:1.02!important;
  text-align:center!important;
  transform:translateX(-50%) rotate(-2deg)!important;
  white-space:normal!important;
 }

 /* Page 8: one complete phone composition. The panel itself no longer owns a
    redundant internal scroll surface; spacing is scaled with the real dynamic
    viewport so browser chrome does not create a few accidental overflow pixels. */
 body.copyist-creative .copyist-panel[data-section="8"]{overflow:hidden!important}
 body.copyist-creative .copyist-panel[data-section="8"] .copyist-experience,
 body.copyist-creative .copyist-panel[data-section="8"] .viewport,
 body.copyist-creative .copyist-panel[data-section="8"] .contact{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-layout{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(14px,2.2dvh,22px) 20px max(54px,calc(env(safe-area-inset-bottom) + 48px))!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:clamp(8px,1.5dvh,12px)!important;
  align-content:stretch!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  scrollbar-width:none!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-layout::-webkit-scrollbar{display:none!important}
 body.copyist-creative .copyist-panel[data-section="8"] .contact-copy{
  min-height:0!important;
  column-gap:14px!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-copy h2{
  margin:2px 0 0!important;
  font-size:clamp(30px,8.6vw,38px)!important;
  line-height:.92!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-copy p{
  margin:clamp(6px,1dvh,9px) 0 0!important;
  font-size:clamp(9px,2.55vw,10.5px)!important;
  line-height:1.3!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-hand{
  margin:0 0 3px!important;
  font-size:clamp(17px,4.8vw,21px)!important;
  line-height:1.02!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-card{
  min-height:0!important;
  margin-top:0!important;
  padding:clamp(11px,1.7dvh,14px) 14px!important;
  align-self:stretch!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-card h3{
  margin:0 0 4px!important;
  font-size:clamp(17px,5vw,20px)!important;
  line-height:1!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-card>p{
  margin:0 0 clamp(6px,1dvh,9px)!important;
  font-size:clamp(8px,2.3vw,9.5px)!important;
  line-height:1.25!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .form-grid{
  grid-template-columns:1fr!important;
  gap:clamp(5px,.9dvh,8px)!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .field label{
  margin-bottom:2px!important;
  font-size:6px!important;
  line-height:1.1!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .field input,
 body.copyist-creative .copyist-panel[data-section="8"] .field textarea{
  padding:clamp(6px,1dvh,8px)!important;
  font-size:9px!important;
  line-height:1.2!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .field textarea{
  min-height:34px!important;
  height:clamp(34px,5dvh,44px)!important;
  resize:none!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .submit{
  margin-top:clamp(5px,.9dvh,8px)!important;
  padding:clamp(8px,1.2dvh,10px)!important;
 }
}

/* Extra-short phone viewports receive one more conservative vertical trim so
   Contact still remains a single composition above the browser chrome. */
@media(max-width:600px) and (orientation:portrait) and (max-height:700px){
 body.copyist-creative .copyist-panel[data-section="8"] .contact-layout{
  padding-top:10px!important;
  gap:6px!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-copy h2{font-size:29px!important}
 body.copyist-creative .copyist-panel[data-section="8"] .contact-copy p{margin-top:5px!important;font-size:9px!important}
 body.copyist-creative .copyist-panel[data-section="8"] .contact-card{padding:9px 12px!important}
 body.copyist-creative .copyist-panel[data-section="8"] .form-grid{gap:4px!important}
 body.copyist-creative .copyist-panel[data-section="8"] .field input,
 body.copyist-creative .copyist-panel[data-section="8"] .field textarea{padding:5px 7px!important}
 body.copyist-creative .copyist-panel[data-section="8"] .field textarea{height:32px!important;min-height:32px!important}
 body.copyist-creative .copyist-panel[data-section="8"] .submit{margin-top:4px!important;padding:7px!important}
}

/* Contact card should fit the viewport without visually stretching into an
   oversized empty slab once scrolling has been removed. */
@media(max-width:600px) and (orientation:portrait){
 body.copyist-creative .copyist-panel[data-section="8"] .contact-layout{
  grid-template-rows:auto auto!important;
  align-content:center!important;
 }
 body.copyist-creative .copyist-panel[data-section="8"] .contact-card{
  align-self:auto!important;
 }
}


/* ========================================================================== 
   FINAL POLISH — true Creative glass-over-canvas geometry
   Sections 2–8 now fill the viewport behind the fixed global navigation.
   Their INNER layouts retain the exact previous usable height/position, so
   only the visual background moves behind the frosted glass, not the content.
   ========================================================================== */
body.copyist-creative .copyist-panel[data-section="2"],
body.copyist-creative .copyist-panel[data-section="3-7"],
body.copyist-creative .copyist-panel[data-section="8"]{
 top:0!important;
 bottom:0!important;
}
body.copyist-creative .copyist-panel[data-section="2"] .intro-layout,
body.copyist-creative .copyist-panel[data-section="3-7"] .orbit-layout,
body.copyist-creative .copyist-panel[data-section="8"] .contact-layout{
 height:calc(100% - var(--creative-topbar-h,80px))!important;
 margin-top:var(--creative-topbar-h,80px)!important;
}


/* ========================================================================== 
   CREATIVE SMARTPHONE FINAL ALIGNMENT — hero axis + navigation cue continuity
   ========================================================================== */
@media(max-width:850px) and (orientation:portrait){
 /* The editorial title now shares the exact 24px left axis used by the Play
    action, removing the extra mc-shell inset that previously pushed it right. */
 body.copyist-creative .copyist-panel[data-section="1"] .mc-hero__content{
  left:24px!important;
  right:24px!important;
  padding-left:0!important;
  padding-right:0!important;
 }

 /* Page 1 already owns the authored mc-scroll-cue. Pages 2–7 receive the same
    informational heartbeat above the mobile section rail. Page 8 is excluded. */
 body.copyist-creative .copyist-panel[data-section="2"]::after,
 body.copyist-creative .copyist-panel[data-section="3-7"]::after{
  content:"SCROLL DOWN TO NAVIGATE   ↓";
  display:block;
  position:absolute;
  z-index:115;
  left:50%;
  bottom:max(52px,calc(env(safe-area-inset-bottom) + 48px));
  transform:translateX(-50%);
  color:rgba(248,245,240,.72);
  font-size:clamp(.45rem,1.65vw,.56rem);
  font-weight:600;
  letter-spacing:.15em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  animation:mc-scroll-heartbeat 2.2s ease-in-out infinite;
 }
}
@media(max-width:850px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
 body.copyist-creative .copyist-panel[data-section="2"]::after,
 body.copyist-creative .copyist-panel[data-section="3-7"]::after{animation:none!important}
}


/* ==========================================================================\n   CREATIVE DETAIL MODAL — FORENSIC READABILITY PASS 2026-09-09\n   Replaces the old expanded-page treatment with a contained editorial modal.\n   Content remains unchanged; only presentation and close interactions change.\n   ========================================================================== */
body.copyist-creative.copyist-detail-open .copyist-section-nav,
body.copyist-creative.copyist-detail-open .section-nav,
body.copyist-creative.copyist-detail-open .contact-float,
body.copyist-creative.copyist-detail-open .scroll-cue{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

body.copyist-creative .detail{
  position:fixed;
  z-index:300;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(22px,4vw,58px);
  background:rgba(6,30,44,.28);
  -webkit-backdrop-filter:blur(22px) saturate(112%);
  backdrop-filter:blur(22px) saturate(112%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .34s ease,visibility 0s linear .36s;
}
body.copyist-creative .detail.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
body.copyist-creative .detail.is-closing{
  opacity:0;
  visibility:visible;
  pointer-events:none;
}

body.copyist-creative .detail .sheet{
  position:relative;
  width:min(1040px,calc(100vw - 96px));
  max-height:min(82dvh,840px);
  overflow:hidden;
  padding:0;
  border:1px solid rgba(199,232,247,.22);
  border-radius:28px;
  background:rgba(6,30,44,.60)!important;
  color:#fffaf0!important;
  -webkit-backdrop-filter:blur(28px) saturate(124%);
  backdrop-filter:blur(28px) saturate(124%);
  box-shadow:0 36px 90px rgba(0,0,0,.44),0 0 0 1px rgba(214,241,252,.10) inset;
  opacity:0;
  transform:translate3d(0,24px,0) scale(.985);
  transform-origin:center;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
body.copyist-creative .detail.open .sheet{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
body.copyist-creative .detail.is-closing .sheet{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.99);
}
body.copyist-creative .detail .sheet:before{
  content:"";
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:#ca7d58;
  pointer-events:none;
}

body.copyist-creative .detail-scroll{
  max-height:min(82dvh,840px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(218,242,252,.34) transparent;
  padding:clamp(42px,4.5vw,62px) clamp(34px,5vw,68px) clamp(34px,4vw,52px);
}
body.copyist-creative .detail-scroll::-webkit-scrollbar{width:6px}
body.copyist-creative .detail-scroll::-webkit-scrollbar-track{background:transparent}
body.copyist-creative .detail-scroll::-webkit-scrollbar-thumb{background:rgba(218,242,252,.28);border-radius:999px}

body.copyist-creative .detail-header{
  max-width:780px;
  padding:0 58px 26px 0;
  border-bottom:1px solid rgba(210,238,250,.22);
}
body.copyist-creative .detail .sheet small{
  display:block;
  margin:0 0 12px;
  color:#ca7d58;
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.copyist-creative .detail .sheet h2{
  margin:0;
  max-width:760px;
  color:#fffaf0;
  font-size:clamp(38px,4.25vw,58px);
  font-weight:950;
  line-height:.92;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
body.copyist-creative .detail-main{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(270px,.68fr);
  gap:clamp(28px,4vw,48px);
  align-items:start;
  padding-top:28px;
}
body.copyist-creative .detail-copy{
  min-width:0;
  max-width:66ch;
}
body.copyist-creative .detail .full{
  color:rgba(255,250,240,.86);
  font-size:15px;
  line-height:1.66;
}
body.copyist-creative .detail .full p{margin:0 0 1.15em}
body.copyist-creative .detail .full p:last-child{margin-bottom:0}

body.copyist-creative .detail-points{
  position:sticky;
  top:0;
  padding:22px 22px 20px;
  border:1px solid rgba(177,222,242,.58);
  border-radius:18px;
  background:rgba(234,248,255,.98)!important;
  box-shadow:0 15px 34px rgba(0,0,0,.18);
}
body.copyist-creative .detail-points-label{
  display:block;
  margin:0 0 13px;
  color:#ca7d58;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.copyist-creative .detail .sheet ul{
  margin:0;
  padding:0 0 0 20px;
  background:transparent;
  color:#102f45;
  font-size:13px;
  line-height:1.48;
}
body.copyist-creative .detail .sheet li{padding-left:4px;margin:0 0 10px}
body.copyist-creative .detail .sheet li:last-child{margin-bottom:0}
body.copyist-creative .detail .sheet li::marker{color:#ca7d58}
body.copyist-creative .detail .detail-hand{
  margin:30px 0 0;
  padding-top:24px;
  border-top:1px solid rgba(210,238,250,.22);
  color:#ca7d58;
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-size:clamp(22px,2.2vw,31px);
  line-height:1.12;
}

body.copyist-creative .detail .close{
  position:absolute;
  z-index:8;
  right:18px;
  top:18px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(4,23,34,.86);
  color:#fff;
  font-size:28px;
  font-weight:300;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  transition:transform .2s ease,background-color .2s ease;
}
body.copyist-creative .detail .close:hover,
body.copyist-creative .detail .close:focus-visible{
  background:#ca7d58;
  transform:scale(1.05);
  outline:none;
}
body.copyist-creative .detail-drag{display:none}

@media(max-width:850px){
  body.copyist-creative .detail{
    place-items:end center;
    padding:8px 9px max(8px,env(safe-area-inset-bottom));
    background:rgba(6,30,44,.28);
    -webkit-backdrop-filter:blur(20px) saturate(110%);
    backdrop-filter:blur(20px) saturate(110%);
  }
  body.copyist-creative .detail .sheet{
    width:100%;
    max-height:min(86dvh,calc(100dvh - 82px));
    border-radius:24px 24px 18px 18px;
    transform:translate3d(0,56px,0) scale(.992);
    transform-origin:center bottom;
  }
  body.copyist-creative .detail.open .sheet{transform:translate3d(0,0,0) scale(1)}
  body.copyist-creative .detail.is-closing .sheet{transform:translate3d(0,70px,0) scale(.994)}
  body.copyist-creative .detail-scroll{
    max-height:min(86dvh,calc(100dvh - 82px));
    padding:46px 20px 28px;
    scrollbar-gutter:auto;
  }
  body.copyist-creative .detail-drag{
    position:absolute;
    z-index:7;
    display:block;
    left:50%;
    top:12px;
    width:46px;
    height:5px;
    border-radius:999px;
    background:rgba(222,244,253,.46);
    transform:translateX(-50%);
    touch-action:none;
  }
  body.copyist-creative .detail .close{
    right:12px;
    top:11px;
    width:40px;
    height:40px;
    font-size:26px;
  }
  body.copyist-creative .detail-header{
    max-width:none;
    padding:0 46px 20px 0;
  }
  body.copyist-creative .detail .sheet small{margin-bottom:9px;font-size:8.5px}
  body.copyist-creative .detail .sheet h2{
    max-width:none;
    font-size:clamp(31px,9vw,42px);
    line-height:.93;
  }
  body.copyist-creative .detail-main{
    display:block;
    padding-top:20px;
  }
  body.copyist-creative .detail .full{
    font-size:13.5px;
    line-height:1.58;
  }
  body.copyist-creative .detail .full p{margin-bottom:1.05em}
  body.copyist-creative .detail-points{
    position:static;
    margin-top:22px;
    padding:18px 18px 16px;
    border-radius:16px;
  }
  body.copyist-creative .detail-points-label{font-size:8px;margin-bottom:11px}
  body.copyist-creative .detail .sheet ul{font-size:12px;line-height:1.45}
  body.copyist-creative .detail .detail-hand{
    margin-top:24px;
    padding-top:20px;
    font-size:clamp(20px,6vw,27px);
  }
}

@media(max-width:850px) and (orientation:landscape){
  body.copyist-creative .detail{place-items:center;padding:10px 14px}
  body.copyist-creative .detail .sheet{width:min(900px,calc(100vw - 28px));max-height:88dvh;border-radius:22px;transform:translate3d(0,28px,0) scale(.992)}
  body.copyist-creative .detail.open .sheet{transform:translate3d(0,0,0) scale(1)}
  body.copyist-creative .detail-scroll{max-height:88dvh;padding:38px 26px 24px}
  body.copyist-creative .detail-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);gap:24px}
  body.copyist-creative .detail-points{margin-top:0}
  body.copyist-creative .detail .sheet h2{font-size:clamp(28px,5vw,40px)}
  body.copyist-creative .detail .full{font-size:11.5px;line-height:1.45}
}

@media(prefers-reduced-motion:reduce){
  body.copyist-creative .detail,
  body.copyist-creative .detail .sheet{transition-duration:.01ms!important}
}


/* ========================================================================== 
   CREATIVE MODAL SKIN + OPEN-FULL-SECTION PERIMETER TRACER
   Structure/gesture logic is unchanged; this block only restores Creative's
   navy-glass visual language and the approved 2s attention tracer.
   ========================================================================== */
body.copyist-creative .detail .sheet:after{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 border-radius:inherit;
 box-shadow:inset 0 1px 0 rgba(221,244,253,.15),inset 0 -1px 0 rgba(0,0,0,.16);
}
body.copyist-creative .detail-points-label{color:#ca7d58}
body.copyist-creative .detail .sheet ul{color:#102f45}
body.copyist-creative .detail .close:hover,
body.copyist-creative .detail .close:focus-visible{background:#ca7d58;color:#fff}

body.copyist-creative .copyist-experience .read-shell{
 position:relative;
 display:inline-flex;
 width:max-content;
 overflow:visible;
 isolation:isolate;
}
body.copyist-creative .copyist-experience .read{
 position:relative;
 z-index:2;
 isolation:isolate;
 overflow:hidden;
}
body.copyist-creative .copyist-experience .read .read-label{position:relative;z-index:2}
body.copyist-creative .copyist-experience .read-orbit{
 --read-orbit-stroke:2.05px;
 --read-one-second-progress:-48;
 --read-corner-progress:-86;
 --read-burst-progress:-143;
 position:absolute;
 z-index:3;
 display:block;
 overflow:visible;
 pointer-events:none;
 max-width:none;
 max-height:none;
}
body.copyist-creative .copyist-experience .read-orbit-path{
 fill:none;
 stroke:var(--gold);
 stroke-width:var(--read-orbit-stroke);
 vector-effect:non-scaling-stroke;
 stroke-linecap:round;
 stroke-linejoin:round;
 stroke-dasharray:22 78;
 stroke-dashoffset:0;
 opacity:0;
 filter:drop-shadow(0 0 3px rgba(212,173,85,.58));
 animation:creative-open-section-orbit 4.7s infinite;
}
@keyframes creative-open-section-orbit{
 /* 0.0s → 1.0s: fade in while the tracer moves slowly and naturally. */
 0%{
  stroke-dashoffset:0;
  opacity:0;
  animation-timing-function:cubic-bezier(.23,.08,.32,1);
 }
 21.2766%{
  stroke-dashoffset:var(--read-one-second-progress);
  opacity:1;
  animation-timing-function:cubic-bezier(.38,.05,.48,1);
 }
 /* 1.5s: arrive at the real top-right CTA chamfer, still fully visible. */
 31.9149%{
  stroke-dashoffset:var(--read-corner-progress);
  opacity:1;
  animation-timing-function:cubic-bezier(.42,0,1,1);
 }
 /* 1.5s → 1.7s: ~500% speed burst and eased fade-out. */
 36.1702%{
  stroke-dashoffset:var(--read-burst-progress);
  opacity:0;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
 }
 /* 3 second silent rest before restarting. */
 100%{stroke-dashoffset:var(--read-burst-progress);opacity:0}
}
@media(prefers-reduced-motion:reduce){
 body.copyist-creative .copyist-experience .read-orbit-path{animation:none!important;opacity:0!important}
}


/* Final Creative modal color guarantee. */
body.copyist-creative .detail .sheet{background:rgba(6,30,44,.60)!important;color:#fffaf0!important}
body.copyist-creative .detail .sheet h2{color:#fffaf0!important}
body.copyist-creative .detail .full{color:rgba(255,250,240,.90)!important}
body.copyist-creative .detail-points{background:rgba(234,248,255,.98)!important;border-color:rgba(196,232,248,.76)!important}
body.copyist-creative .detail .sheet ul{color:#102f45!important}

/* 8B.2 — Retractable media bar. The bar rests below the film with only a small
   frosted top edge visible; JS owns the gravity/bounce drop and ease-out rise. */
@media(prefers-reduced-motion:reduce){
 body.copyist-creative .copyist-media-bar{will-change:auto}
}


/* ========================================================================== 
   STEP 8B.3 — FILM-END INVITATIONS
   Film 01 reveals the retractable media bar and softly pulses Next twice after
   each completed loop. Film 02 gets a compact top-right glass countdown during
   its final five seconds before the authored automatic queue advances to 03.
   ========================================================================== */
body.copyist-creative .copyist-media-round[data-film-next].is-next-invite{
 animation:copyist-next-invite-pulse .76s cubic-bezier(.16,1,.3,1) 2;
}
@keyframes copyist-next-invite-pulse{
 0%,100%{border-color:var(--media-line)!important;background:rgba(6,31,45,.24)!important;box-shadow:0 0 0 0 rgba(212,173,85,0),0 0 0 0 rgba(242,236,223,0);transform:scale(1)}
 42%{border-color:rgba(242,236,223,.94)!important;background:rgba(212,173,85,.18)!important;box-shadow:0 0 0 5px rgba(212,173,85,.16),0 0 22px 5px rgba(242,236,223,.20);transform:scale(1.075)}
 68%{border-color:rgba(212,173,85,.82)!important;background:rgba(202,125,88,.12)!important;box-shadow:0 0 0 3px rgba(212,173,85,.10),0 0 13px 2px rgba(242,236,223,.13);transform:scale(1.035)}
}
body.copyist-creative .copyist-next-countdown{
 position:absolute;z-index:11;top:clamp(10px,1.4vw,18px);right:clamp(10px,1.4vw,18px);
 display:flex;align-items:center;gap:.48rem;min-height:34px;padding:.48rem .72rem;
 border:1px solid rgba(242,236,223,.22);border-radius:14px;
 background:rgba(4,23,34,.60);-webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08);
 box-shadow:0 12px 30px rgba(0,0,0,.24);color:var(--media-ivory,#f2ecdf);
 opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(12px,-5px,0) scale(.94);
 transform-origin:100% 0;transition:opacity .36s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),visibility 0s linear .42s;
}
body.copyist-creative .copyist-next-countdown.is-visible{
 opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1);transition-delay:0s;
}
body.copyist-creative .copyist-next-countdown.is-leaving{
 opacity:0;visibility:visible;transform:translate3d(9px,-6px,0) scale(.955);
 transition:opacity .30s cubic-bezier(.55,.02,.8,.35),transform .32s cubic-bezier(.55,.02,.8,.35),visibility 0s linear .32s;
}
body.copyist-creative .copyist-next-countdown__label{
 font-size:clamp(7px,.58vw,9px);font-weight:850;letter-spacing:.13em;line-height:1;text-transform:uppercase;white-space:nowrap;color:rgba(242,236,223,.76);
}
body.copyist-creative .copyist-next-countdown__time{
 min-width:1.7em;font-size:clamp(11px,.9vw,14px);font-weight:950;letter-spacing:.03em;line-height:1;text-align:right;color:#f8f5f0;
}
@media(min-width:851px){
 /* Desktop/laptop: the permanent 80px Creative site header sits above the
    full-viewport film player. Keep the film-end countdown visibly below it. */
 body.copyist-creative .copyist-next-countdown{
  top:calc(var(--creative-topbar-h,80px) + clamp(10px,1.4vw,18px));
 }
 /* True fullscreen removes the site header from the visible film surface, so
    restore the authored top-right countdown position inside the player. */
 body.copyist-creative .copyist-film-player:fullscreen .copyist-next-countdown,
 body.copyist-creative .copyist-film-player:-webkit-full-screen .copyist-next-countdown,
 body.copyist-creative .copyist-film-player.is-fullscreen .copyist-next-countdown{
  top:clamp(10px,1.4vw,18px);
 }
}
@media(max-width:850px){
 body.copyist-creative .copyist-next-countdown{top:8px;right:8px;min-height:28px;gap:.35rem;padding:.38rem .52rem;border-radius:11px;-webkit-backdrop-filter:blur(11px) saturate(1.06);backdrop-filter:blur(11px) saturate(1.06)}
 body.copyist-creative .copyist-next-countdown__label{font-size:6.2px;letter-spacing:.10em}
 body.copyist-creative .copyist-next-countdown__time{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 body.copyist-creative .copyist-media-round[data-film-next].is-next-invite{animation:none!important;border-color:rgba(212,173,85,.82)!important;box-shadow:0 0 0 3px rgba(212,173,85,.10)!important}
 body.copyist-creative .copyist-next-countdown{transition:none!important;transform:none!important}
}

/* ========================================================================== 
   iOS NATIVE-MEDIA PLAYER OVERRIDE — MYSFIT PSEUDO FULLSCREEN
   iPhone/iPad keep the foreground video playsinline and expand the authored
   wrapper instead of handing playback to Safari's native fullscreen chrome.
   The global site navigation is suppressed only during this iOS film state.
   ========================================================================== */
body.copyist-creative.is-creative-film-pseudo-fullscreen .copyist-creative-shell{
 z-index:2147483640!important;
}
body.copyist-creative.is-creative-film-pseudo-fullscreen > .mysfit-site-nav,
body.copyist-creative.is-creative-film-pseudo-fullscreen > .mysfit-site-mobile-nav{
 opacity:0!important;
 visibility:hidden!important;
 pointer-events:none!important;
}
body.copyist-creative.is-creative-film-pseudo-fullscreen .copyist-film-player.is-ios-pseudo-fullscreen{
 z-index:2147483646!important;
}


/* ==========================================================================
   PAGE 1 — WATCH WITH SOUND INVITATION STROKE
   Fusion-forensic implementation: one closed path + one moving write window.
   Desktop geometry and timing come directly from the supplied Fusion export.
   Portrait keeps the mechanism/timing and only re-authors the curve geometry.
   ========================================================================== */
body.copyist-creative .mc-hero__watch-invite{
 position:absolute;
 z-index:7;
 inset:0;
 width:100%;
 height:100%;
 overflow:hidden;
 pointer-events:none;
 color:#f8f5f0;
}
body.copyist-creative .mc-hero__watch-invite-path{
 fill:none;
 stroke:currentColor;
 stroke-width:var(--invite-stroke-width,3px);
 vector-effect:non-scaling-stroke;
 stroke-linecap:round;
 stroke-linejoin:round;
 shape-rendering:geometricPrecision;
 opacity:1;
 will-change:stroke-dashoffset;
}
/* Independent CTA attention ripple. This belongs to the CTA itself, not to
   the travelling stroke: the button remains still while one large soft ring
   expands outward and disappears. */
body.copyist-creative .mc-hero__watch span:after{
 content:""!important;
 position:absolute!important;
 z-index:-1!important;
 inset:-1px!important;
 border:1px solid rgba(248,245,240,.72)!important;
 border-radius:50%!important;
 opacity:0;
 pointer-events:none!important;
 animation:copyist-watch-cta-ripple 5.2s cubic-bezier(.16,1,.3,1) 1.25s infinite!important;
 transform-origin:center;
 will-change:transform,opacity;
}
body.copyist-creative .mc-hero.is-film-active .mc-hero__watch span:after{
 animation:none!important;
 opacity:0!important;
}
@keyframes copyist-watch-cta-ripple{
 0%{opacity:.42;transform:scale(1)}
 27%{opacity:0;transform:scale(3.15)}
 28%,100%{opacity:0;transform:scale(3.15)}
}
/* Rare synchronized CTA FLARE/TWIRL. This is intentionally nothing like
   the quiet circular ripple above. JS fires it only when an eligible moving
   stroke physically reaches the CTA loop: pass 1, then 6, 11, 16... */
body.copyist-creative .mc-hero__watch-special-burst{
 position:absolute;
 z-index:8;
 display:block;
 box-sizing:border-box;
 border:0;
 border-radius:50%;
 background:radial-gradient(circle,rgba(255,230,151,.94) 0 5%,rgba(212,173,85,.38) 13%,rgba(212,173,85,.10) 26%,rgba(212,173,85,0) 58%);
 opacity:0;
 transform:scale(.58) rotate(-22deg);
 transform-origin:center;
 pointer-events:none;
 filter:drop-shadow(0 0 7px rgba(242,196,85,.82));
 will-change:transform,opacity,filter;
}
/* Broken asymmetric arcs create the twirl rather than another ring. */
body.copyist-creative .mc-hero__watch-special-burst:before{
 content:"";
 position:absolute;
 inset:-72%;
 border-radius:50%;
 background:conic-gradient(from -38deg,
  transparent 0 7%,rgba(255,233,163,.18) 9%,rgba(236,190,75,.98) 15%,transparent 21% 39%,
  rgba(212,173,85,.15) 42%,rgba(255,222,126,.88) 48%,transparent 55% 73%,
  rgba(235,188,66,.82) 77%,transparent 84% 100%);
 -webkit-mask:radial-gradient(circle,transparent 0 40%,#000 44% 51%,transparent 56%);
 mask:radial-gradient(circle,transparent 0 40%,#000 44% 51%,transparent 56%);
 opacity:0;
 transform:rotate(0deg) scale(.72);
 transform-origin:center;
}
/* A short multi-axis flare flashes through the twirl and then disappears. */
body.copyist-creative .mc-hero__watch-special-burst:after{
 content:"";
 position:absolute;
 inset:-118%;
 border-radius:50%;
 background:
  linear-gradient(90deg,transparent 0 46%,rgba(255,236,171,.96) 49.4% 50.6%,transparent 54% 100%),
  linear-gradient(0deg,transparent 0 46%,rgba(236,190,75,.88) 49.4% 50.6%,transparent 54% 100%),
  linear-gradient(45deg,transparent 0 48%,rgba(255,224,131,.70) 49.5% 50.5%,transparent 52% 100%),
  linear-gradient(-45deg,transparent 0 48%,rgba(212,173,85,.66) 49.5% 50.5%,transparent 52% 100%);
 -webkit-mask:radial-gradient(circle,#000 0 9%,rgba(0,0,0,.92) 19%,rgba(0,0,0,.52) 39%,transparent 72%);
 mask:radial-gradient(circle,#000 0 9%,rgba(0,0,0,.92) 19%,rgba(0,0,0,.52) 39%,transparent 72%);
 opacity:0;
 transform:scale(.32) rotate(9deg);
 transform-origin:center;
}
body.copyist-creative .mc-hero__watch-special-burst.is-active{
 animation:copyist-watch-special-flare-shell 1.16s cubic-bezier(.14,.72,.16,1) both;
}
body.copyist-creative .mc-hero__watch-special-burst.is-active:before{
 animation:copyist-watch-special-flare-twirl 1.16s cubic-bezier(.13,.68,.12,1) both;
}
body.copyist-creative .mc-hero__watch-special-burst.is-active:after{
 animation:copyist-watch-special-flare-rays 1.02s cubic-bezier(.12,.66,.18,1) both;
}
body.copyist-creative .mc-hero.is-film-active .mc-hero__watch-special-burst,
body.copyist-creative .mc-hero.is-film-active .mc-hero__watch-special-burst:before,
body.copyist-creative .mc-hero.is-film-active .mc-hero__watch-special-burst:after{
 animation:none!important;opacity:0!important;
}
@keyframes copyist-watch-special-flare-shell{
 0%{opacity:0;transform:scale(.48) rotate(-22deg);filter:drop-shadow(0 0 4px rgba(242,196,85,.32))}
 8%{opacity:1;transform:scale(.78) rotate(-8deg);filter:drop-shadow(0 0 18px rgba(255,218,116,.98))}
 28%{opacity:.96;transform:scale(1.08) rotate(18deg);filter:drop-shadow(0 0 25px rgba(242,196,85,.88))}
 66%{opacity:.62;transform:scale(1.46) rotate(53deg);filter:drop-shadow(0 0 31px rgba(212,173,85,.50))}
 100%{opacity:0;transform:scale(1.88) rotate(82deg);filter:drop-shadow(0 0 38px rgba(212,173,85,0))}
}
@keyframes copyist-watch-special-flare-twirl{
 0%{opacity:0;transform:rotate(-42deg) scale(.58)}
 10%{opacity:1;transform:rotate(-5deg) scale(.78)}
 44%{opacity:.98;transform:rotate(248deg) scale(1.18)}
 100%{opacity:0;transform:rotate(620deg) scale(1.72)}
}
@keyframes copyist-watch-special-flare-rays{
 0%{opacity:0;transform:scale(.24) rotate(6deg)}
 8%{opacity:.98;transform:scale(.78) rotate(1deg)}
 24%{opacity:.90;transform:scale(1.06) rotate(-5deg)}
 58%{opacity:.40;transform:scale(1.48) rotate(-18deg)}
 100%{opacity:0;transform:scale(2.10) rotate(-31deg)}
}
@media(prefers-reduced-motion:reduce){
 body.copyist-creative .mc-hero__watch-invite-path{will-change:auto!important}
 body.copyist-creative .mc-hero__watch span:after{animation:none!important;opacity:0!important}
 body.copyist-creative .mc-hero__watch-special-burst,
 body.copyist-creative .mc-hero__watch-special-burst:before,
 body.copyist-creative .mc-hero__watch-special-burst:after{animation:none!important;opacity:0!important}
}