/* Five observed reference components, expressed with Musou's saved copy and palette. */
/* Biondic: an inline image belongs to the headline, the paragraph sits lower right. */
.about-page .about-hero{text-align:left;padding-bottom:clamp(80px,8vw,154px)}
.about-page .about-hero-heading .inline-studio-heading{font-size:clamp(64px,min(12.8vw,25svh),248px);line-height:.97;letter-spacing:-.04em;max-width:none}
.inline-studio-heading .editorial-line-inner{display:flex;align-items:center;gap:.1em}
.inline-studio-text{display:block;min-width:0}
.inline-studio-visual{display:inline-flex;align-items:center;gap:.045em;flex:none;font-weight:400;line-height:.9;letter-spacing:-.04em}
.inline-studio-crop{position:relative;display:block;width:1.12em;height:.72em;overflow:visible;perspective:650px}
.inline-studio-reel-block{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.inline-studio-crop img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;transform-origin:50% 50%}
.inline-studio-crop img[hidden]{display:none}
/* Keep motion controls available to keyboard users without a permanent label on the hero. */
.reel-motion-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:auto}
.reel-motion-control[hidden]{display:none!important}
.reel-motion-control:focus-visible{position:fixed;left:var(--agency-gutter,24px);bottom:24px;width:auto;height:auto;min-height:44px;margin:0;padding:10px 18px;clip-path:none;z-index:1100;background:var(--agency-bg,#2d2927);color:var(--agency-ink,#eae3db);outline:1px solid currentColor;outline-offset:4px}
/* Every word occupies the widest authored slot, while only the active face is visible. */
.hero-word-entry{display:inline-block;white-space:nowrap}
.hero-word-reel{position:relative;display:inline-grid;vertical-align:baseline;height:.96em;line-height:.94;perspective:4em;isolation:isolate}
.hero-word-sizer{grid-area:1/1;visibility:hidden;white-space:nowrap}
.hero-word-face{text-align:left;position:absolute;inset:0;display:block;white-space:nowrap;backface-visibility:hidden;transform-origin:50% 50%;line-height:.94}
.hero-word-face[hidden]{display:none}
.about-page .about-hero-copy{display:grid;grid-template-columns:1fr 1.1fr;align-items:end;gap:9vw;margin-top:50px;padding:0}
.about-page .about-hero-copy .agency-lead{grid-column:2;grid-row:1;text-align:left;text-wrap:initial;max-width:37ch;font-size:clamp(20px,1.5vw,29px);line-height:1.5;margin:0}
.about-page .about-hero-copy .agency-link{grid-column:1;grid-row:1;justify-self:start;margin:0}
.about-page .about-hero .hero-aside{margin:35px 0 0;max-width:38ch;font-size:11px}
/* Won J You: wide type travels over the photographic scene instead of another text column. */
.about-page .spread-story{display:block;padding-block:clamp(24px,5svh,54px)}
.about-page .spread-story .agency-heading{font-size:clamp(42px,min(8.5vw,16svh),163px);line-height:1.02;max-width:18ch;letter-spacing:-.04em;text-wrap:balance;translate:calc((1 - var(--spread-caption,1))*18vw) 0}
.about-page .spread-story .agency-lead{max-width:47ch;font-size:clamp(16px,2.2svh,22px);margin-top:25px}
/* Rise at Seven: one layer of type, individually travelling words, bounded by the line. */
.reference-word{display:inline-block;transform-origin:left bottom}
[data-reference-hero] .editorial-line{overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
.has-reference-motion [data-reference-heading] .reference-word{transform:translate(calc((1 - var(--word-travel,1))*12vw),calc((1 - var(--word-travel,1))*.35em)) rotate(calc((1 - var(--word-travel,1))*4deg))}
.about-page .studio-fit>[data-reference-heading]{min-width:0}
.about-page .studio-fit>[data-reference-heading] .agency-heading{max-width:14ch;font-size:clamp(44px,5.5vw,106px)}
/* dotsandlines: a fixed index beside the actual service scope, not a wall of cards. */
.service-catalogue [hidden]{display:none!important}
.service-selector{display:none}
.service-panel-intro{margin-bottom:35px}
.service-panel-title{font-size:24px;font-weight:500;line-height:1.1;letter-spacing:-.025em}
.service-panel-fit{font-size:17px;line-height:1.5;max-width:35ch}
.has-service-selector .service-catalogue{display:grid;grid-template-columns:32% minmax(0,1fr);align-items:start;padding-block:clamp(65px,7vw,134px);scroll-margin-top:100px}
.has-service-selector .service-selector{display:flex;flex-direction:column;align-items:stretch;position:sticky;top:calc(var(--editorial-rail) - 20px);padding-right:3vw;padding-top:14px}
.service-selector button{min-height:48px;scroll-margin-top:150px;display:flex;align-items:baseline;gap:clamp(12px,1.5vw,29px);padding:12px 0;width:100%;text-align:left;line-height:1.08;letter-spacing:-.035em;position:relative;isolation:isolate;border:0;background:transparent;color:inherit}
.selector-number{font-size:13px;letter-spacing:0;flex:none;align-self:start;padding-top:.65em;font-variant-numeric:tabular-nums}
.selector-label{font-size:clamp(36px,4.4vw,84px);font-weight:500;text-transform:lowercase}
.selector-dot{width:.18em;height:.18em;border-radius:50%;background:currentColor;opacity:0;scale:0;align-self:center;font-size:clamp(36px,4.4vw,84px);flex:none;transition:opacity 180ms,scale 480ms cubic-bezier(.16,1,.3,1)}
.service-selector [aria-pressed="true"] .selector-dot{opacity:1;scale:1}
.service-selector button:focus-visible{outline:none}
.service-selector button:focus-visible .selector-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.13em}
.service-selector button::after{content:"";position:absolute;inset:auto 0 2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 480ms cubic-bezier(.16,1,.3,1)}
.has-service-selector .service-chapters{min-width:0}
.has-service-selector .service-offering{border:0;min-width:0}
.has-service-selector .service-offering-body{padding:0 var(--agency-gutter) 0 3vw}
.has-service-selector .service-panel-intro{display:flex;align-items:baseline;justify-content:space-between;gap:25px;margin-bottom:42px;padding-bottom:25px;border-bottom:1px solid var(--agency-rule)}
.has-service-selector .service-description{font-size:clamp(30px,3.3vw,63px);line-height:1.13;max-width:29ch;margin:0 0 50px;letter-spacing:-.03em}
.has-service-selector .service-proof-layout{grid-template-columns:1fr 1fr;gap:4vw}
.has-service-selector .service-band{height:clamp(260px,27vw,520px)}
.has-service-selector .service-delivery{min-width:0}
.has-service-selector .service-delivery>h3{font-size:clamp(26px,2vw,38px);margin-bottom:22px}
.has-service-selector .service-delivery .editorial-copy{font-size:clamp(18px,1.15vw,22px);line-height:1.55}
.has-service-selector .service-delivery .service-deliverables li{font-size:17px;line-height:1.4;padding-block:12px}
.has-service-selector .service-specifics{gap:3vw;margin-top:55px}
.has-service-selector .service-specifics h3{font-size:17px;margin-bottom:14px}
.has-service-selector .service-specifics p{font-size:16px}
.has-service-selector .service-example-link{font-size:18px;gap:16px}
.has-service-selector .service-example-note{font-size:12px}
/* Wemotion: a genuine depth rotation; no overlapping flat copies of the active number. */
.services-page .process-meter{align-items:center;min-width:70%;margin-top:20px}
.services-page .process-meter-window{font-size:clamp(80px,min(11vw,20svh),210px);height:1.8em;width:1.55em;perspective:5em;overflow:clip;mask-image:linear-gradient(transparent,black 28%,black 72%,transparent);font-variant-numeric:tabular-nums}
.services-page .process-meter-roll{position:relative;top:.4em;height:1em;width:1.55em;transform-style:preserve-3d;transform:translateZ(-1.15em) rotateX(calc(var(--active-step,0)*55deg));transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.services-page .process-meter-roll>span{position:absolute;inset:0;display:grid;place-items:center;line-height:1;backface-visibility:hidden;transform:rotateX(calc(var(--process-face)*-55deg)) translateZ(1.15em)}
.services-page .process-meter-total{align-self:center}
.services-page .process-meter-track{margin-top:5px}
@media(hover:hover) and (pointer:fine){.service-selector button:hover::after{transform:scaleX(1)}}
@media(min-width:701px) and (max-height:700px){
 .has-service-selector .service-selector{top:100px}.service-selector .selector-label,.service-selector .selector-dot{font-size:clamp(32px,9svh,60px)}
 .services-page .process-meter{margin-top:10px}.services-page .process-meter-window{font-size:18svh}
 .about-page .about-hero-copy{margin-top:34px}.about-page .spread-story .agency-heading{font-size:13svh}.about-page .spread-story .agency-lead{margin-top:18px}
}
@media(max-width:1100px){
 .has-service-selector .service-catalogue{grid-template-columns:34% minmax(0,1fr)}
 .selector-label,.selector-dot{font-size:4.2vw}.service-selector button{gap:14px}
 .has-service-selector .service-proof-layout{grid-template-columns:1fr;gap:35px}.has-service-selector .service-band{height:43vw}
 .has-service-selector .service-delivery{margin-top:0}
 .has-service-selector .service-specifics{grid-template-columns:1fr 1fr}
 .has-service-selector .service-specifics>div:last-child{grid-column:1/-1}
 .has-service-selector .service-panel-intro{display:block}.service-panel-fit{margin-top:12px}
}
@media(max-width:700px){
 .about-page .about-hero-heading .inline-studio-heading{font-size:12.7vw;line-height:1.03}
 .inline-studio-visual{gap:.025em}.inline-studio-crop{width:1.06em;height:.75em}
 .about-page .about-hero-copy{grid-template-columns:1fr;gap:28px;margin-top:35px}
 .about-page .about-hero-copy .agency-lead{grid-column:1;grid-row:1;font-size:21px;max-width:none}
 .about-page .about-hero-copy .agency-link{grid-column:1;grid-row:2}
 .about-page .about-hero .hero-aside{margin-top:25px;font-size:10px;max-width:34ch}
 .about-page .spread-story .agency-heading{font-size:clamp(42px,12vw,72px);max-width:17ch}
 .about-page .spread-story .agency-lead{font-size:17px;margin-top:22px;max-width:33ch}
 .about-page .studio-fit>[data-reference-heading] .agency-heading{font-size:11vw;max-width:16ch}
 .has-service-selector .service-catalogue{display:block;padding-block:45px 70px;scroll-margin-top:100px}
 .has-service-selector .service-selector{position:relative;top:auto;flex-direction:row;gap:18px;justify-content:space-between;padding-inline:var(--agency-gutter);padding-block:0 35px}
 .service-selector button{width:auto;gap:7px;padding-block:10px;align-items:baseline;letter-spacing:-.025em}
 .selector-label,.selector-dot{font-size:clamp(17px,5vw,27px)}.selector-number{font-size:9px;padding-top:0}.selector-dot{display:none}
 .service-selector [aria-pressed="true"]::after{transform:scaleX(1)}
 .has-service-selector .service-offering-body{padding-inline:var(--agency-gutter)}
 .has-service-selector .service-panel-intro{display:block;margin-bottom:30px;padding-bottom:20px}.service-panel-title{font-size:26px}.service-panel-fit{font-size:16px;margin-top:10px}
 .has-service-selector .service-description{font-size:31px;max-width:none;margin-bottom:32px}
 .has-service-selector .service-proof-layout{display:block}.has-service-selector .service-band{height:92vw}
 .has-service-selector .service-delivery{margin-top:38px}.has-service-selector .service-delivery>h3{font-size:32px}
 .has-service-selector .service-specifics{display:block;margin-top:38px}.has-service-selector .service-specifics>div+div{margin-top:27px}
 .services-page .process-meter-window{font-size:100px}.services-page .process-meter{min-width:0;width:fit-content;gap:0 20px}
}
/* Centre both interior hero groups in the space below the fixed navigation.
   Shared tracks keep their heading starts aligned; intrinsic content can extend
   the section on short screens instead of being clipped to a fixed height. */
.agency-page:is(.about-page,.services-page){padding-top:0}
.about-page .about-hero,.services-page .services-hero{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0;min-height:calc(100svh - var(--wp-admin--admin-bar--height,0px));padding-top:clamp(96px,12svh,128px);padding-bottom:clamp(32px,4svh,48px)}
.about-page .about-hero-heading,.services-page .services-hero-heading{display:flow-root;flex:none;min-height:min(31vw,56svh)}
.about-page .about-hero-copy,.services-page .services-hero-bottom{flex:none;min-height:clamp(112px,19.2svh,174px);margin-top:clamp(28px,3.5svh,40px)}
.about-page .about-hero-copy{align-content:center}
.services-page .services-hero-bottom{align-items:center}
@media(min-width:701px) and (max-height:700px){
 .about-page .about-hero,.services-page .services-hero{padding-top:88px;padding-bottom:24px}
 .about-page .about-hero-heading,.services-page .services-hero-heading{min-height:54svh}
 .about-page .about-hero-copy,.services-page .services-hero-bottom{min-height:20svh;margin-top:20px}
}
@media(max-width:700px){
 .about-page .about-hero,.services-page .services-hero{padding-top:112px;padding-bottom:48px}
 .about-page .about-hero-heading,.services-page .services-hero-heading{display:flex;flex-direction:column;justify-content:center;min-height:clamp(200px,32svh,300px)}
 .about-page .about-hero-heading .inline-studio-heading{font-size:13.5vw;line-height:1.05}
 .about-page .inline-studio-visual{font-size:10vw;gap:.045em}
 .about-page .inline-studio-crop{width:28vw;height:21vw}
 .services-page .services-hero .agency-display{font-size:15.45vw;line-height:.98}
 .about-page .about-hero-copy,.services-page .services-hero-bottom{min-height:250px;margin-top:clamp(36px,6svh,56px)}
}
@media(min-width:701px) and (max-width:900px){
 .about-page .inline-studio-visual{font-size:10vw;gap:.045em}
 .about-page .inline-studio-crop{width:28vw;height:21vw}
 .about-page .about-hero-heading,.services-page .services-hero-heading{display:flex;flex-direction:column;justify-content:center;min-height:36vw}
 .about-page .about-hero-copy,.services-page .services-hero-bottom{min-height:250px}
}
@media(prefers-reduced-motion:reduce){
 .has-reference-motion [data-reference-heading] .reference-word{transform:none!important}
 .about-page .spread-story .agency-heading{translate:none}
 .selector-dot,.service-selector button::after{transition:none}
}
@media print{
 .about-page .about-hero,.services-page .services-hero{min-height:0;padding-block:40px}
 .about-page .about-hero-heading,.services-page .services-hero-heading,.about-page .about-hero-copy,.services-page .services-hero-bottom{min-height:0}

 .reel-motion-control{display:none!important}.hero-word-face{display:none!important}.hero-word-face:first-child{display:block!important;transform:none!important}.inline-studio-reel-block{transform:none!important}.inline-studio-crop img{display:none!important}.inline-studio-crop img:first-child{display:block!important;transform:none!important;opacity:1!important}
 .has-reference-motion [data-reference-heading] .reference-word{transform:none!important}.about-page .spread-story .agency-heading{translate:none}
 .has-service-selector .service-catalogue{display:block}.has-service-selector .service-selector{display:none}
 .has-service-selector .service-offering[hidden]{display:block!important}
 .has-service-selector .service-offering::details-content{display:contents;block-size:auto;content-visibility:visible}
 .has-service-selector .service-offering-body{padding:25px 0;break-inside:avoid}
}