/* MYSFIT clean-room static architecture: progressive enhancement only. */
:root{--mysfit-terracotta:#c17c53;--mysfit-burgundy:#7c3f3f;--mysfit-ink:#1a1a1a;--mysfit-ivory:#f8f5f0}
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden} body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.copyist-home-shell{width:100%;max-width:100%;overflow-x:hidden}
@supports (overflow:clip){.copyist-home-shell{overflow-x:clip}}
.copyist-mobile-menu{display:none;position:fixed;z-index:90;top:80px;left:0;right:0;background:rgba(248,245,240,.98);border-top:1px solid #e5ddd5;box-shadow:0 20px 40px rgba(0,0,0,.08)}
.copyist-mobile-menu.is-open{display:block}.copyist-mobile-menu a{display:block;padding:14px 20px;font-family:Barlow,Arial,sans-serif;font-size:1rem;color:#24323a;border-bottom:1px solid rgba(0,0,0,.05)}
.copyist-menu-button{display:none;border:0;background:transparent;padding:10px;font-size:1.4rem;line-height:1;color:#24323a}
.copyist-card-icon{width:56px;height:56px;border-radius:12px;background:rgba(193,124,83,.1);display:grid;place-items:center;color:#c17c53;font-size:24px;margin-bottom:24px}
.process-tab.is-active{background:#c17c53!important;color:white!important;box-shadow:0 8px 30px rgba(193,124,83,.3)}.process-tab.is-active .process-chevron{transform:rotate(90deg)}.process-detail{display:none}.process-detail.is-active{display:block}
.process-mobile-panel{display:none}.process-mobile-panel.is-open{display:block}
.contact-tab.is-active{background:#c17c53;color:white;border-color:#c17c53}.contact-pane{display:none}.contact-pane.is-active{display:block}
.blog-filter-btn.is-active{background:#c17c53;color:#fff}.blog-card[hidden]{display:none!important}
.article-copy{font-family:Barlow,sans-serif;color:#5d6367;font-size:1.08rem;line-height:1.8}.article-copy h2{font-family:"Bebas Neue Pro","Bebas Neue",sans-serif;color:#202d36;font-size:clamp(2rem,4vw,3.25rem);line-height:1;margin:2.25rem 0 1rem}.article-copy h3{font-size:1.4rem;color:#202d36;font-weight:600;margin:2rem 0 .75rem}.article-copy p{margin:0 0 1.35rem;text-align:justify}.article-copy strong{color:#2d3033}.article-copy blockquote{border-left:4px solid #c17c53;margin:1.7rem 0;padding:.25rem 0 .25rem 1.25rem;color:#c17c53;font-style:italic}.article-copy ul,.article-copy ol{margin:1rem 0 1.5rem;padding-left:1.5rem}.article-copy li{margin:.5rem 0}.article-copy a{color:#c17c53;text-decoration:underline}
.entity-static main{min-height:100vh}
.copyist-status{position:fixed;left:10px;bottom:10px;z-index:9999;font:10px/1.2 monospace;background:#061f2d;color:#fff;padding:5px 8px;border-radius:4px;opacity:.35;pointer-events:none}
@media(max-width:1279px){.copyist-menu-button{display:block}}
@media(max-width:767px){
  .article-copy{font-size:1rem}.article-copy p{text-align:left}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}[data-motion],[data-motion-page]{opacity:1!important;transform:none!important}}


/* STEP 5 — production motion choreography, progressively enhanced. */
[data-motion],[data-motion-page]{opacity:0;will-change:transform,opacity;transition-property:opacity,transform;transition-duration:var(--motion-duration,700ms);transition-delay:var(--motion-delay,0ms);transition-timing-function:cubic-bezier(.22,.78,.24,1)}
[data-motion="up"]{transform:translate3d(0,40px,0)}
[data-motion="left"]{transform:translate3d(-80px,0,0)}
[data-motion="right"]{transform:translate3d(80px,0,0)}
[data-motion="scale"]{transform:scale(.5)}
[data-motion="scale-y"]{transform:scaleY(0);transform-origin:top}
[data-motion-page="up-small"]{transform:translate3d(0,18px,0)}
[data-motion].is-motion-visible,[data-motion-page].is-motion-visible{opacity:1;transform:none}
.copyist-logo-track{width:max-content;animation:copyist-scroll-logos 25s linear infinite;will-change:transform}
@keyframes copyist-scroll-logos{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.process-detail.is-active{animation:copyist-panel-in .42s cubic-bezier(.22,.78,.24,1)}
.contact-pane.is-active{animation:copyist-panel-in .46s cubic-bezier(.22,.78,.24,1)}
@keyframes copyist-panel-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.process-mobile-panel{display:block!important;max-height:0;opacity:0;overflow:hidden;transform:translate3d(0,-8px,0);padding-top:0!important;padding-bottom:0!important;border-top-width:0!important;transition:max-height .58s cubic-bezier(.22,.78,.24,1),opacity .36s ease,transform .58s cubic-bezier(.22,.78,.24,1),padding .58s cubic-bezier(.22,.78,.24,1),border-width .2s ease}
.process-mobile-panel.is-open{max-height:900px;opacity:1;transform:none;padding-top:1.5rem!important;padding-bottom:1.5rem!important;border-top-width:1px!important}
@media(prefers-reduced-motion:reduce){[data-motion],[data-motion-page]{opacity:1!important;transform:none!important;transition:none!important}.copyist-logo-track{animation:none!important}.process-detail.is-active,.contact-pane.is-active{animation:none!important}.process-mobile-panel{transition:none!important}}


/* STEP 6 — final visual clarity, balance and consistency pass. */
/* Homepage-only rhythm: preserve the wider production system elsewhere. */
.copyist-home-shell main>section.section-padding{padding-top:6.5rem!important;padding-bottom:6.5rem!important}
.copyist-home-shell .copyist-section-heading{margin-bottom:3rem!important}
.copyist-home-shell #services .grid.md\:grid-cols-3{gap:1.5rem}
.copyist-home-shell .copyist-principles-list{display:grid;gap:1.5rem}
.copyist-home-shell .copyist-principles-list>article{margin-top:0!important;margin-bottom:0!important}
.copyist-home-shell .copyist-contact-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,440px);margin-left:auto;margin-right:auto;margin-bottom:2.5rem!important;gap:1rem}
.copyist-home-shell .copyist-contact-tabs .contact-tab{display:flex;width:100%;min-height:56px;align-items:center;justify-content:center;padding:14px 18px}
/* Research cards share one statistic axis so every copy column begins at the same x-position. */
.copyist-home-shell .copyist-research-row{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:start;gap:1.5rem}
.copyist-home-shell .copyist-research-stat{width:128px;min-width:0}
.copyist-home-shell .copyist-research-copy{min-width:0}
.copyist-home-shell .copyist-research-stat-value{font-family:"Bebas Neue Pro","Bebas Neue",sans-serif!important;font-size:clamp(3.4rem,5vw,4.5rem)!important;line-height:.88!important;letter-spacing:.01em}
.copyist-home-shell .copyist-research-stat>.heading-1,.copyist-home-shell .copyist-research-stat>div{margin:0;line-height:.92}
.copyist-home-shell .copyist-research-copy>h3{margin-top:.1rem}
/* Narrow repeated-card whitespace without flattening the hierarchy. */
.copyist-home-shell .copyist-service-card,.copyist-home-shell .copyist-research-card{height:100%}
.copyist-home-shell #philosophy .copyist-principle-card{height:100%}
/* Give justified narrow copy more natural word spacing while keeping the requested alignment. */
.copyist-home-shell .text-justify{hyphens:auto;text-wrap:pretty}
@media(max-width:1023px) and (min-width:768px){
  .copyist-home-shell main>section.section-padding{padding-top:5.5rem!important;padding-bottom:5.5rem!important}
}
@media(max-width:767px){
  .copyist-home-shell main>section.section-padding{padding-top:4rem!important;padding-bottom:4rem!important}
  .copyist-home-shell .copyist-section-heading{margin-bottom:2.5rem!important}
  .copyist-home-shell .copyist-hero-actions{display:grid!important;grid-template-columns:1fr;width:100%;gap:.75rem!important}
  .copyist-home-shell .copyist-hero-actions>a{display:flex!important;width:100%;min-height:64px;align-items:center;justify-content:center;text-align:center;padding:1rem 1.5rem!important}
  .copyist-home-shell .copyist-service-card,.copyist-home-shell .copyist-research-card,.copyist-home-shell .copyist-principle-card{padding:1.5rem!important}
  .copyist-home-shell .copyist-principles-list{gap:1.25rem}
  .copyist-home-shell .copyist-research-row{grid-template-columns:88px minmax(0,1fr);gap:1rem}
  .copyist-home-shell .copyist-research-stat{width:88px}
  .copyist-home-shell .copyist-research-stat-value{font-size:3rem!important}
  .copyist-home-shell .copyist-research-copy>h3{margin-top:0}
  .copyist-home-shell .copyist-contact-tabs{gap:.75rem;margin-bottom:2rem!important}
  .copyist-home-shell .copyist-contact-tabs .contact-tab{min-height:56px;padding:12px 10px;font-size:.95rem}
  .copyist-home-shell .contact-pane{padding:1.5rem!important}
}

/* HERO BALANCE PASS — positioning experiment: restore equal visual mass without redesigning the hero. */
/* The headline gained conceptual weight in the culture-first version. Rebalance the composition by
   giving the photograph more horizontal presence, lifting it optically, and letting the trust rail
   anchor both columns instead of adding extra weight only beneath the copy. */
.copyist-home-shell [data-motion-hero] .copyist-hero-grid{min-width:0}
.copyist-home-shell [data-motion-hero] .copyist-hero-copy,
.copyist-home-shell [data-motion-hero] .copyist-hero-media{min-width:0}
.copyist-home-shell [data-motion-hero] .copyist-hero-trust{width:100%;max-width:none}

@media(min-width:1280px){
  .copyist-home-shell [data-motion-hero]>.w-full{padding-top:5.25rem}
  /* HERO TITLE ALIGNMENT — title spacing only.
     At desktop width, the first visible title line aligns to the photo top and
     the unchanged paragraph resolves at the photo bottom. No paragraph/media/CTA geometry is altered. */
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy .heading-1{
    padding-top:.625rem!important;
    line-height:.97!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-grid{
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)!important;
    gap:clamp(2.75rem,4vw,4.5rem)!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy{max-width:660px}
  .copyist-home-shell [data-motion-hero] .copyist-hero-media-frame{
    width:calc(100% + 1.25rem);
    max-width:none;
    margin-right:-1.25rem;
    transform:translateY(-2.5rem);
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-image{
    width:100%;
    height:auto;
    min-height:0!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-trust{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:2rem;
    margin-top:1.5rem!important;
    padding-top:1.5rem!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-trust>p{margin-bottom:0!important;max-width:44rem}
  .copyist-home-shell [data-motion-hero] .copyist-hero-trust>div{flex-wrap:wrap;justify-content:flex-end}
}

@media(min-width:1024px) and (max-width:1279px){
  .copyist-home-shell [data-motion-hero] .copyist-hero-grid{gap:3rem!important}
  .copyist-home-shell [data-motion-hero] .copyist-hero-media-frame{transform:translateY(-1rem)}
  .copyist-home-shell [data-motion-hero] .copyist-hero-trust{margin-top:2rem!important}
}

@media(max-width:1023px){
  .copyist-home-shell [data-motion-hero] .copyist-hero-trust{margin-top:2.25rem!important;padding-top:1.5rem!important}
}

@media(max-width:767px){
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy .heading-1{margin-bottom:1.5rem!important;line-height:1.02}
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy .body-text{margin-bottom:2rem!important}
  .copyist-home-shell [data-motion-hero] .copyist-hero-trust>div{gap:1rem!important;flex-wrap:wrap}
}

/* MOBILE HERO HIERARCHY PASS — 2026-09-08
   Smartphone only. Make the proposition the hero and the photograph supporting evidence:
   eyebrow + headline first, cropped image second, explanatory copy/actions afterwards.
   Desktop/tablet geometry remains untouched. */
@media(max-width:767px){
  .copyist-home-shell [data-motion-hero]>.w-full{padding-top:5.75rem!important}
  .copyist-home-shell [data-motion-hero] .copyist-hero-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    align-items:start!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy{display:contents!important}
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy>.label-text{
    order:1!important;
    margin:0 0 1.25rem!important;
    max-width:92%;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy>.heading-1{
    order:2!important;
    width:100%;
    max-width:100%;
    margin:0 0 1.75rem!important;
    padding:0!important;
    font-size:clamp(3.85rem,18.5vw,5.35rem)!important;
    line-height:.9!important;
    letter-spacing:-.012em;
    text-wrap:balance;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-media{
    order:3!important;
    width:100%;
    margin:0 0 2rem!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-media-frame{
    width:100%!important;
    height:300px!important;
    min-height:0!important;
    margin:0!important;
    transform:none!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-image{
    display:block;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
    object-position:center 30%!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-floating-stat{
    left:1rem!important;
    bottom:1rem!important;
    padding:1rem!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-floating-stat .w-12{
    width:2.5rem!important;
    height:2.5rem!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-floating-stat .heading-5{font-size:1.35rem!important}
  .copyist-home-shell [data-motion-hero] .copyist-floating-stat .text-sm{font-size:.78rem!important}
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy>.body-text{
    order:4!important;
    margin:0 0 2rem!important;
  }
  .copyist-home-shell [data-motion-hero] .copyist-hero-copy>.copyist-hero-actions{
    order:5!important;
  }
}