/* English Chloe home only. Figma fonts and neutral palette are the source of truth.
   Scale: display / section / subheading / body / label. Diagram annotations retain
   their proportional stage scale; no ancestor overflow is introduced for sticky. */
body.chloe-home{
 --title:"OPTITimes-Roman","Times New Roman",serif;
 --text:"Chloe Figma Inter",Helvetica,Arial,sans-serif;
 --ink:#000;--paper:#fff;--soft:#f5f5f5;--muted:#666;--line:#c9c9c9;
 --ds-title:clamp(32px,4.21793vw,48px);--ds-subtitle:clamp(24px,2.46vw,28px);
 --ds-body:16px;--ds-label:14px;--ds-ease:cubic-bezier(.22,.61,.36,1);
 font-family:var(--text);color:var(--ink);
}
.chloe-home :is(button,input,textarea,select){font-family:var(--text)}
.chloe-home :is(h1,h2,h3){font-family:var(--title);font-weight:500;letter-spacing:0}
.chloe-home :is(h1,h2,h3) em{font-family:"OPTITimesRoman-Italic",serif;font-weight:500}
.chloe-home .wordmark{font-family:var(--title)}
/* Shared content edge and heading hierarchy, including the retained sections. */
.chloe-home .section-heading{max-width:none;text-align:left;margin-inline:0}
.chloe-home .section-heading p{margin-inline:0}
.chloe-home :is(.section-heading h2,.figma-section-heading h2,.cw-index-title-text){font-size:var(--ds-title);line-height:1.2;color:var(--ink)}
.chloe-home :is(.figma-eyebrow,.cw-index-eyebrow){font-family:"OPTITimesRoman-Italic",serif;font-size:clamp(18px,1.75747vw,20px);line-height:1.5;color:var(--ink)}
.chloe-home :is(.value-grid,.steps,.case-heading,.angle-header) h3{font-size:var(--ds-subtitle);line-height:1.25}
.chloe-home :is(.section-heading p,.value-grid p,.steps p,.case-summary p){font-family:var(--text);font-size:var(--ds-body);line-height:1.625;color:var(--muted)}
.chloe-home :is(.media-label,.product-name,.case-tag,.text-link,.text-button){font-family:var(--text);font-size:var(--ds-label);line-height:1.5}
.chloe-home .photo-cta h2{font-size:var(--ds-title);line-height:1.2;color:#fff}
.chloe-home .photo-cta{padding-inline:max(var(--gutter),calc((100% - var(--content))/2))}
.chloe-home .mission-layout{max-width:calc(var(--content) + 2*var(--gutter))}
.chloe-home #our-mission .mission-copy{left:4.39367%}
.chloe-home #our-mission .mission-claim{display:block;width:calc(100% - 2.54833cqw);padding:0;border:0;background:transparent;text-align:left;cursor:pointer;font-family:var(--title)}
.chloe-home #our-mission .mission-marker{pointer-events:none}
/* One interaction language: 200ms feedback without moving or resizing targets.
   Brightness reaches image buttons as well as dynamically created viewer controls,
   without overriding carousel translations, Mission transitions, or photo crops. */
.chloe-home :is(a,button,summary,[role="button"],input,textarea,select){
 transition:color .2s var(--ds-ease),background-color .2s var(--ds-ease),border-color .2s var(--ds-ease),box-shadow .2s var(--ds-ease),filter .2s var(--ds-ease);
}
.chloe-home .button{border-radius:0;font-family:var(--text);font-weight:600}
.chloe-home :is(.text-link,.text-button,.email-addresses){text-underline-offset:5px}
@media(hover:hover){
 .chloe-home :is(a,button,summary,[role="button"]):not(:disabled):hover{filter:brightness(.86)}
 .chloe-home :is(a,button,summary,[role="button"]):not(:disabled):hover{box-shadow:none}
 .chloe-home .button:not(:disabled):hover{background:#000;color:#fff;border-color:#000;filter:none}
 .chloe-home .button.light:hover,
 .chloe-home.has-hero:not(.scrolled):not(.menu-open) .nav-cta:hover{background:#fff;color:#000;border-color:#fff}
 .chloe-home.has-hero.scrolled .nav-cta:hover{background:#000;color:#fff;border-color:#000}
 .chloe-home :is(.image-open,.cw-index-card,.viewer-image):not(:disabled):hover{filter:brightness(.94);box-shadow:none}
 .chloe-home :is(.carousel-controls,.carousel-thumbs,.rail-navigation,.album-nav,.viewer-toolbar) button:hover{background:#eee;color:#000}
 .chloe-home :is(.text-link,.text-button,.email-addresses):hover{text-decoration:none}
 .chloe-home #our-mission .mission-claim:hover{color:#666;box-shadow:none;filter:none}
 .chloe-home #our-mission .mission-claim.is-active:hover{color:#000;text-decoration:none}
 .chloe-home .agent-tabs button:hover{background:#eee;box-shadow:none}
 .chloe-home :is(input,textarea,select):hover{border-color:#000;background-color:#fafafa}
}
/* Preserve the color + movement animation when native buttons replace claim text. */
.chloe-home #our-mission .mission-claim{transition:color .45s ease,transform .45s var(--ds-ease)}
@media(max-width:767px){
 .chloe-home{--ds-body:15px;--ds-label:13px}
 .chloe-home #our-mission .mission-copy{width:100%}
 .chloe-home #our-mission .mission-claim{width:calc(100% - 20px)}
 .chloe-home :is(.section-heading h2,.figma-section-heading h2,.cw-index-title-text){font-size:var(--ds-title);line-height:1.2}
}
@media(prefers-reduced-motion:reduce){
 .chloe-home :is(a,button,summary,[role="button"],input,textarea,select){transition:none!important}
}
.chloe-home .cw-index.figma-client-index .cw-index-title-text{font-size:var(--ds-title);line-height:1.2}
.chloe-home .cw-index.figma-client-index .cw-index-eyebrow{font-size:clamp(18px,1.75747vw,20px);line-height:1.5}
.chloe-home .outfit-heading h3{font-family:var(--text);font-size:var(--ds-body);font-weight:600;line-height:1.5}

.chloe-home .ds-separator{font-family:var(--text);font-size:.7em;vertical-align:.12em}

/* One horizontal rail across the English homepage. Keep artwork proportions;
   height-dependent fitting must never move section text away from that rail. */
.chloe-home .photo-cta{text-align:center;padding-inline:0}
.chloe-home .photo-cta .wrap{width:100%;max-width:calc(var(--content) + 2*var(--gutter));padding-inline:var(--gutter)}
.chloe-home .photo-cta p{margin-left:auto;margin-right:auto}
.chloe-home .photo-cta h2{text-align:center}
.chloe-home #wf-scroll #hd,.chloe-home #wf-scroll #left{left:0}
.chloe-home #wf-scroll #algo{left:var(--wf-center,412px)}
.chloe-home #wf-scroll #out,.chloe-home #wf-scroll #cap{left:var(--wf-right,774px)}
.chloe-home #wf-scroll #desc{left:var(--wf-right,774px);right:auto;width:var(--wf-column,317px)}
@media(min-width:768px){
 .chloe-home #our-mission .mission-layout{width:100%;height:auto;aspect-ratio:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gap);align-items:start}
 .chloe-home #our-mission .mission-layout{--mission-unit:min(1vw,calc((100svh - var(--mission-header) - 32px)*1138/685/100),calc((var(--content) + 2*var(--gutter))/100))}
 .chloe-home #our-mission .mission-layout{height:calc(var(--mission-unit)*685/1138*100);padding-top:calc(var(--mission-unit)*4500/1138)}
 .chloe-home #our-mission .mission-copy{position:static;width:100%}
 /* Keep the existing height-fitted typography while moving its column to the rail. */
 .chloe-home #our-mission h2{font-size:calc(var(--mission-unit)*3.16344)}
 .chloe-home #our-mission .mission-claims{margin-top:calc(var(--mission-unit)*2.37258)}
 .chloe-home #our-mission .mission-claim{font-size:calc(var(--mission-unit)*1.75747);min-height:calc(var(--mission-unit)*3.60281)}
 .chloe-home #our-mission .mission-claim.is-active{transform:translateX(calc(var(--mission-unit)*2.54833))}
 .chloe-home #our-mission .mission-marker{height:calc(var(--mission-unit)*3.60281)}
 .chloe-home #our-mission .mission-marker img{width:calc(var(--mission-unit)*1.94112);height:calc(var(--mission-unit)*1.94112)}
 .chloe-home #our-mission .mission-visual figcaption{font-size:calc(var(--mission-unit)*1.05448)}
 .chloe-home #our-mission .mission-visuals{position:relative;left:auto;top:auto;width:calc(var(--mission-unit)*44.72759);justify-self:end}
}
@media(max-width:767px){
 .chloe-home #our-mission .mission-layout{padding-inline:var(--gutter)}
}

/* Shared section rhythm: two adjacent 40px / 24px insets form an 80px / 48px gap. */
.chloe-home{--ds-section-space:40px}
body.chloe-home main>:is(section:not(.hero),#wf-scroll){padding-block:var(--ds-section-space)}
.chloe-home .photo-cta{min-height:420px;margin-block:48px;--ds-section-space:72px}
.chloe-home #our-mission.mission-sticky{height:calc(var(--mission-panel-height,100svh) + var(--mission-travel) + 2*var(--ds-section-space))}
.chloe-home #our-mission .mission-pin{height:auto}
.chloe-home #our-mission .mission-layout{height:auto;padding-block:0}
@media(max-width:767px){
 .chloe-home{--ds-section-space:24px}
 .chloe-home .photo-cta{margin-block:32px;--ds-section-space:48px}
 .chloe-home #our-mission .mission-visuals{flex:none;height:min(calc((100vw - 2*var(--gutter))*573/509),calc(100svh - var(--mission-header) - 220px));aspect-ratio:auto}
}
/* State feedback uses tone only; no extra line, ring or inset edge. Structural CTA
   borders and section dividers stay intact. Keyboard focus uses tonal feedback as well. */
.chloe-home :is(a,button,summary,[role="button"]):is(:hover,:active,[aria-current],[aria-selected="true"],[aria-pressed="true"],.is-active){text-decoration:none!important;box-shadow:none!important;outline:none!important}
.chloe-home :is(.text-link,.text-button){border-bottom-color:transparent!important}
.chloe-home :is(.agent-tabs,.brand-tabs,.project-tabs,.filter-row) button{border-color:var(--line)!important;box-shadow:none!important;text-decoration:none!important}
.chloe-home .carousel-thumbs button{border-color:transparent!important}
.chloe-home :is(.agent-tabs,.brand-tabs,.project-tabs,.filter-row) [aria-selected="true"]{background-color:#eee;border-color:var(--line)!important;box-shadow:none!important;text-decoration:none!important}
.chloe-home :is(a,button,summary,[role="button"]):focus-visible{outline:none!important;box-shadow:none!important;background-color:#eee;color:#000;filter:brightness(.85)}

.chloe-home .carousel-thumbs [aria-pressed="true"]{background-color:#eee;filter:brightness(.9)}
@media(hover:hover){
 .chloe-home a:not(.button):not(.cw-index-card):hover,.chloe-home button:is(.text-link,.text-button,.email-addresses):hover{color:var(--muted);filter:none}
 .chloe-home.has-hero:not(.scrolled):not(.menu-open) .site-header a:not(.button):hover{color:#ddd}
 .chloe-home .menu-toggle:hover{background-color:var(--soft)}
}

/* Mission: breathe after Hero and pin below the header, before artwork reaches it. */
body.chloe-home main>#our-mission.mission-sticky{
 --mission-pin-gap:32px;--mission-lead-space:72px;
 padding-top:var(--mission-lead-space);
 height:calc(var(--mission-panel-height,100svh) + var(--mission-travel) + var(--mission-lead-space) + var(--ds-section-space));
}
.chloe-home #our-mission .mission-pin{top:calc(var(--mission-header) + var(--mission-pin-gap))}
@media(min-width:768px){
 .chloe-home #our-mission .mission-layout{--mission-rail-inset:max(var(--gutter),calc((100vw - var(--content))/2));max-width:none;padding-inline:var(--mission-rail-inset);grid-template-columns:minmax(0,1fr) calc(50vw - var(--mission-rail-inset))}
 .chloe-home #our-mission .mission-visuals{
  width:100%;height:calc(100svh - var(--mission-header) - 2*var(--mission-pin-gap));
  aspect-ratio:auto;
 }
 /* Crop the composed artwork as one layer so thumbnails stay registered to it. */
 .chloe-home #our-mission .mission-picture{inset:0;height:100%;aspect-ratio:auto;transform:scale(1.04);transform-origin:top center}
 .chloe-home #our-mission .mission-visual.is-active .mission-picture{transform:scale(1)}
}
@media(max-width:767px){
 body.chloe-home main>#our-mission.mission-sticky{--mission-pin-gap:20px;--mission-lead-space:40px}
 .chloe-home #our-mission .mission-visuals{height:min(calc((100vw - 2*var(--gutter))*573/509),calc(100svh - var(--mission-header) - 260px))}
}

/* Keep the original menu hover/current-page underline and inherited ink color. */
.chloe-home .site-header nav a:hover{color:inherit!important;filter:none}

/* Mission imagery uses the existing original-image/SKU dialog. */
.chloe-home #our-mission .mission-image-open{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;appearance:none;color:inherit;text-align:inherit;cursor:zoom-in;pointer-events:none}
.chloe-home #our-mission .mission-visual.is-active .mission-image-open{pointer-events:auto}

/* Hero supporting copy: three pixels smaller than the existing responsive scale. */
.chloe-home .hero.figma-hero.figma-rebuild .figma-hero-copy{font-size:calc(clamp(12px,1.05448vw,22px) - 3px)}
@media(max-width:767px){.chloe-home .hero.figma-hero.figma-rebuild .figma-hero-copy{font-size:9px}}

/* Workflow copy matches the unscaled CTA body text; only narrow layouts need extra header room. */
.chloe-home #wf-scroll #desc{left:auto;right:0;width:var(--wf-copy-width,680px);font-size:var(--wf-copy-font,16px);line-height:var(--wf-copy-line,26px);transform:scale(var(--wf-copy-inverse,1));transform-origin:top right}
.chloe-home #wf-scroll #desc>span{display:block}
.chloe-home #wf-scroll :is(#left,#algo,#out,#cap,#wires){margin-top:var(--wf-copy-offset,0px)}