/* V10.7 Studio Motion: intentionally small, accessible motion language.
   Inspired by lateral section entrances at cdodelaware.com; no framework, no scroll hijack.
   The HTML is readable without scripts. Never hide navigation targets. */
:root{--ptw-display:'Archivo','Helvetica Neue',Arial,sans-serif;--ptw-body:'DM Sans','Helvetica Neue',Arial,sans-serif;--ptw-ease:cubic-bezier(.20,.72,.24,1);--ptw-navy:#0a121c}
html{scroll-padding-top:92px}
body,button,input,textarea,select{font-family:var(--ptw-body)!important;font-optical-sizing:auto}
body{letter-spacing:.008em;font-feature-settings:'kern' 1;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.section-title,.flow-title,.page-hero h1,.detail-copy h2,.quote-form-heading h3,.reputation-score,.closing-quote h2,.tint-guide h2,.tint-guide h3,.reputation-card blockquote,.mobile-menu a{font-family:var(--ptw-display)!important;font-optical-sizing:auto;letter-spacing:-.012em;overflow-wrap:normal}
h1,h2,h3,h4{font-weight:600;line-height:1.1;text-wrap:balance}
.page-hero h1,.service-detail h2{font-weight:600;letter-spacing:-.014em}
p,li,blockquote{line-height:1.65}
.main-nav a,.header-cta,.btn,.card-cta,.text-link,.footer-links a{font-family:var(--ptw-body)!important;letter-spacing:.045em}
.main-nav a{font-size:13px;font-weight:600}
.header-cta{letter-spacing:.07em}
.quote-panel .quote-form-heading h3{font-size:clamp(23px,2vw,29px);font-weight:600;letter-spacing:-.012em}
/* Hero: a useful local SEO headline, with clean visual rhythm. */
.hero.hero-atelier.first-screen-quote{background:var(--ptw-navy);height:auto;max-height:none;min-height:0;padding-bottom:clamp(48px,5vw,80px)}
.first-screen-grid{grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center;gap:clamp(24px,3.5vw,74px)}
.first-screen-quote .hero-copy{min-width:0;max-width:100%;padding-top:clamp(25px,4vw,75px)}
.first-screen-quote h1{font-family:var(--ptw-display)!important;font-weight:600;font-size:clamp(44px,4.7vw,80px);line-height:1.04;letter-spacing:-.019em;text-transform:none;text-wrap:balance;white-space:normal;max-width:100%;margin-bottom:clamp(18px,2.7vw,35px)}
.first-screen-quote h1 .line{display:block;line-height:1.09;overflow:visible!important;padding:0 .04em .04em 0!important;margin:0!important}
.first-screen-quote h1 .line span{display:block;transform:none;white-space:normal;overflow-wrap:normal}
.first-screen-quote h1 .hero-location{font-family:var(--ptw-body);font-size:.53em;font-weight:500;letter-spacing:.005em;color:#afc8ff;margin-top:13px!important;line-height:1.25}
.first-screen-quote .hero-under p{max-width:445px;font-size:clamp(15px,1.22vw,18px);line-height:1.64;letter-spacing:.008em}
.first-screen-quote .quote-panel{box-shadow:0 25px 80px rgba(0,0,0,.32);border-color:rgba(181,206,255,.22)}
.hero-proof{margin-top:20px}
/* Retire competing scroll-timelines, zooms and parallax from previous motion experiments. */
.craft-bridge-photo img,.craft-bridge h2,.reputation-heading,.tint-guide .shade-column,.work .work-feature,.work-feature-photo img,.masonry-gallery .masonry-media img,.intro-portrait img,.detail-photo img,.blue-break::before{animation:none!important;animation-timeline:auto!important}
.intro-portrait img,.detail-photo img,.work-feature-photo img{transform:none!important;will-change:auto!important}
.work .work-feature{transform:none!important;width:100%;margin-left:0}
.blue-break::before{transform:none!important}
/* With or without JS, former reveal systems never hide page content. */
.js .v8-enter,.js .js-reveal,.js .media-reveal,.js .scroll-words,.js .scroll-words .word{opacity:1!important;transform:none!important;clip-path:none!important}
/* Replace the awkward hover-strip navigation with editorial service stories. */
.services-stage{background:#0a121b;padding:clamp(92px,9vw,148px) 0 clamp(74px,8vw,140px);isolation:isolate;overflow:clip}
.services-stage .stage-head{max-width:850px;margin:0 auto clamp(44px,6vw,86px);text-align:center}
.services-stage .stage-head .section-title{font-family:var(--ptw-display)!important;font-size:clamp(48px,7vw,104px);font-weight:600;letter-spacing:-.017em;line-height:1.08;margin-bottom:20px}
.services-stage .stage-head p{max-width:540px;margin:0 auto;font-size:clamp(15px,1.25vw,18px);line-height:1.68}
.studio-services{position:relative;z-index:1}
.studio-service{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5.7vw,102px);align-items:center;padding:clamp(28px,4.2vw,76px) 0;border-top:1px solid rgba(214,229,255,.14);min-width:0}
.studio-service:last-child{border-bottom:1px solid rgba(214,229,255,.14)}
.studio-service-reverse .studio-service-image{order:2}
.studio-service-reverse .studio-service-content{order:1}
.studio-service-image{position:relative;display:block;width:100%;height:clamp(260px,24vw,420px);overflow:hidden;background:#172334;isolation:isolate}
.studio-service-image::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(8,18,29,.28));transition:opacity .5s}
.studio-service-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:saturate(.87) contrast(1.04);transition:transform 1.15s var(--ptw-ease),filter .75s ease}
.studio-service-image:hover img,.studio-service-image:focus-visible img{transform:scale(1.055);filter:saturate(.97) contrast(1.07)}
.studio-service-content{min-width:0;max-width:540px}
.studio-service-content h3{font-size:clamp(35px,3.7vw,66px);font-weight:600;letter-spacing:-.019em;line-height:1.09;margin:0 0 clamp(16px,2vw,26px);overflow-wrap:normal;hyphens:none;text-wrap:balance}
.studio-service-content p{font-size:clamp(16px,1.23vw,19px);line-height:1.65;color:#b9c7da;max-width:450px;margin:0 0 24px}
.studio-service-link{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid #8aabeb;padding:7px 0;color:#f7faff;letter-spacing:.04em;font-size:14px;font-weight:600;transition:color .25s,border-color .25s}
.studio-service-link:hover,.studio-service-link:focus-visible{color:#9fc1ff;border-color:#fff}
/* Lateral entrance: content is never hidden. Only translate+soft opacity for offscreen regions. */
.roll-in{opacity:1;transform:none;transition:transform .86s var(--ptw-ease),opacity .76s ease}
.motion-enhanced .roll-in:not(.is-visible){opacity:.83;transform:translate3d(var(--roll-x,0px),0,0)}
.motion-enhanced .roll-left{--roll-x:-54px}
.motion-enhanced .roll-right{--roll-x:54px}
.motion-enhanced .roll-in.is-visible{transform:translate3d(0,0,0);opacity:1}
/* Separately reveal each portion of the photography in the approved style. */
.craft-bridge-photo,.craft-bridge-copy-inner,.work-feature-photo{will-change:auto}
.reputation-heading{animation:none!important}
.reputation-intro h2,.tint-guide-heading h2,.work-head h2{font-weight:600;letter-spacing:-.016em}
.reputation-card blockquote{font-weight:500;letter-spacing:-.012em}
.craft-bridge h2{font-weight:600;letter-spacing:-.022em}
.craft-bridge h2 em{font-family:var(--ptw-display)!important;font-style:normal;font-weight:600;letter-spacing:-.02em;color:#a9c5ff;font-size:1em}
.tint-guide-heading h2,.blue-break h2{font-weight:600;letter-spacing:-.017em}
/* Prevent width/compositing problems when entering from the sides. */
.reputation,.tint-guide,.work,.closing-quote,.service-detail,.services-stage,.craft-bridge,.blue-break{overflow-x:clip}
@media(max-width:1100px){
 .first-screen-grid{grid-template-columns:minmax(0,1fr) minmax(380px,1fr);gap:24px}
 .first-screen-quote h1{font-size:clamp(40px,4.8vw,59px)}
 .studio-service{gap:clamp(25px,4vw,55px)}
 .studio-service-content h3{font-size:clamp(34px,4vw,54px)}
}
@media(max-width:900px){
 .first-screen-grid{grid-template-columns:1fr;gap:26px}
 .first-screen-quote .hero-copy{padding-top:0;max-width:700px}
 .first-screen-quote h1{font-size:clamp(45px,7.3vw,74px);max-width:690px}
 .first-screen-quote h1 .hero-location{font-size:.54em}
 .studio-service{grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:24px}
 .studio-service-image{height:clamp(240px,30vw,360px)}
 .studio-service-content h3{font-size:clamp(30px,4.4vw,47px)}
 .studio-service-content p{font-size:15.5px}
}
@media(max-width:680px){
 .first-screen-quote h1{font-size:clamp(42px,10.5vw,61px);line-height:1.06}
 .first-screen-quote h1 .hero-location{font-size:.52em;margin-top:9px!important}
 .first-screen-quote .hero-under p{font-size:15.5px}
 .services-stage{padding:88px 0 92px}
 .services-stage .stage-head .section-title{font-size:clamp(48px,11vw,72px)}
 .studio-service{grid-template-columns:1fr;gap:0;padding:32px 0 39px}
 .studio-service-image,.studio-service-reverse .studio-service-image{order:0;height:clamp(225px,70vw,330px)}
 .studio-service-content,.studio-service-reverse .studio-service-content{order:1;padding-top:26px;max-width:100%}
 .studio-service-content h3{font-size:clamp(35px,9.1vw,48px);margin-bottom:12px}
 .studio-service-content p{font-size:16px;max-width:420px;margin-bottom:12px}
 .motion-enhanced .roll-in:not(.is-visible){transform:translate3d(var(--roll-x,0px),0,0);opacity:.88}
 .motion-enhanced .roll-left{--roll-x:-24px}
 .motion-enhanced .roll-right{--roll-x:24px}
 .craft-bridge h2{font-size:clamp(48px,11.5vw,74px)}
}
@media(max-width:365px){.first-screen-quote h1{font-size:clamp(40px,10.1vw,48px)}.studio-service-content h3{font-size:clamp(32px,9vw,41px)}}
@media(prefers-reduced-motion:reduce){
 .roll-in,.motion-enhanced .roll-in:not(.is-visible),.motion-enhanced .roll-in.is-visible{opacity:1!important;transform:none!important;transition:none!important}
 .studio-service-image img{transition:none!important}
 .craft-bridge *, .work-feature-photo,.tint-guide *, .reputation *{animation:none!important}
}

/* V10.8 — compact editorial rhythm. The same side-entrance interactions with
   less scroll distance; no hard-coded page heights or hidden content. */
.services-stage {
  padding-block:clamp(58px,6vw,90px) clamp(54px,5.5vw,78px);
}
.services-stage .stage-head {
  margin-bottom:clamp(24px,3vw,42px);
  max-width:760px;
}
.services-stage .stage-head .section-title {
  font-size:clamp(42px,5vw,70px);
  line-height:1.06;
  margin-bottom:14px;
}
.services-stage .stage-head p {
  font-size:clamp(15px,1.13vw,17px);
  line-height:1.5;
  max-width:515px;
}
.studio-service {
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(26px,3.4vw,56px);
  padding:clamp(11px,1.1vw,18px) 0;
}
.studio-service-image {
  height:clamp(160px,12.5vw,205px);
}
.studio-service-image img {
  object-position:center 45%;
}
.studio-service-content h3 {
  font-size:clamp(30px,3.15vw,50px);
  line-height:1.08;
  margin-bottom:12px;
}
.studio-service-content p {
  font-size:clamp(15px,1.12vw,17px);
  line-height:1.5;
  max-width:395px;
  margin-bottom:12px;
}
.studio-service-link {
  min-height:36px;
  font-size:13px;
  padding:5px 0;
}
/* The bridge is a visual beat, not another full-height hero. */
.craft-bridge {
  height:clamp(380px,32vw,480px);
  min-height:0;
  grid-template-rows:minmax(0,1fr);
}
.craft-bridge-copy {
  padding:clamp(32px,4vw,64px) clamp(26px,4.2vw,64px);
}
.craft-bridge h2 {
  font-size:clamp(43px,4.45vw,66px);
  line-height:1.035;
  letter-spacing:-.016em;
  margin-bottom:20px;
}
.craft-bridge p {
  font-size:clamp(15px,1.12vw,17px);
  line-height:1.55;
  max-width:375px;
  margin-bottom:18px;
}
.craft-bridge-link {font-size:13px;}
@media(max-width:900px) {
  .services-stage {padding-block:64px 60px;}
  .services-stage .stage-head {margin-bottom:25px;}
  .services-stage .stage-head .section-title {font-size:clamp(42px,6.2vw,55px);}
  .studio-service {gap:24px;padding:15px 0;}
  .studio-service-image {height:clamp(170px,23vw,216px);}
  .studio-service-content h3 {font-size:clamp(28px,3.8vw,40px);margin-bottom:9px;}
  .studio-service-content p {font-size:14px;margin-bottom:10px;}
  .craft-bridge {height:360px;min-height:0;}
  .craft-bridge h2 {font-size:clamp(38px,5vw,48px);}
  .craft-bridge-copy {padding:32px 27px;}
}
@media(max-width:680px) {
  .services-stage {padding-block:56px 52px;}
  .services-stage .stage-head {margin-bottom:21px;}
  .services-stage .stage-head .section-title {
    font-size:clamp(40px,10vw,56px);
    margin-bottom:9px;
  }
  .services-stage .stage-head p {font-size:14px;line-height:1.5;max-width:355px;}
  .studio-service {
    grid-template-columns:clamp(96px,31vw,136px) minmax(0,1fr);
    gap:clamp(13px,3.8vw,20px);
    align-items:center;
    padding:13px 0;
  }
  .studio-service-image,.studio-service-reverse .studio-service-image {
    order:0;
    height:clamp(128px,36vw,153px);
    align-self:stretch;
  }
  .studio-service-content,.studio-service-reverse .studio-service-content {
    order:1;
    padding:0;
    max-width:100%;
  }
  .studio-service-content h3 {
    font-size:clamp(22px,5.8vw,29px);
    line-height:1.09;
    margin-bottom:7px;
    text-wrap:pretty;
  }
  .studio-service-content p {
    font-size:clamp(12px,3.2vw,14px);
    line-height:1.4;
    margin-bottom:7px;
  }
  .studio-service-link {font-size:12px;min-height:30px;padding:4px 0;letter-spacing:.015em;}
  .craft-bridge {height:auto;display:flex;flex-direction:column;}
  .craft-bridge-photo {height:clamp(220px,65vw,310px);flex:none;}
  .craft-bridge-copy {padding:27px 7vw 46px;}
  .craft-bridge h2 {font-size:clamp(40px,10vw,54px);margin-bottom:13px;line-height:1.06;}
  .craft-bridge p {font-size:15px;line-height:1.5;margin-bottom:14px;}
}
@media(max-width:360px) {
  .studio-service {grid-template-columns:90px minmax(0,1fr);gap:12px;}
  .studio-service-image,.studio-service-reverse .studio-service-image {height:132px;}
  .studio-service-content h3 {font-size:21px;}
  .studio-service-content p {font-size:12px;line-height:1.36;}
  .craft-bridge h2 {font-size:40px;}
}


/* V10.9 — Native smooth anchor movement (script adds precise sticky-header offset). */
html{scroll-behavior:smooth}
:target{scroll-margin-top:100px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}