/* A collection of objects, photographed in the same light. */
.thinking{background:var(--paper);padding-top:76px;padding-bottom:90px}
.thinking .section-label>span:last-child{color:#777772}
.thinking-heading{margin:32px 0 42px}
.thinking h2{font-size:clamp(46px,6vw,88px)}
.essay-grid{gap:58px 32px}
.essay-visual.editorial-art{display:block;height:auto;aspect-ratio:1165/1014;padding:0;background:#ede0cd;overflow:hidden;isolation:isolate;transition:none}
.editorial-art img{display:block;width:100%;height:auto;max-width:none;transition:transform .65s cubic-bezier(.2,.7,.2,1);transform-origin:50% 38%}
.essay-card:hover .essay-visual{transform:none}
.essay-card:hover .editorial-art img,.essay-card:focus-visible .editorial-art img{transform:scale(1.025)}
.essay-meta{margin:21px 0 10px;font-size:10px;font-weight:550;letter-spacing:.07em}
.essay-meta>span:last-child{color:#777772;font-weight:400}
.essay-card h3{font-size:clamp(28px,3.05vw,46px);font-weight:550;line-height:1.06;letter-spacing:-.05em}
.essay-card>p{font-size:clamp(15px,1.35vw,18px);margin-top:10px;color:#555552;line-height:1.45}
.read-label{font-size:13px;margin-top:14px;padding:5px 0;border-color:#aaa9a1;display:inline-flex;align-items:center;gap:20px}
.read-label>span{transition:transform .25s}
.essay-card:hover .read-label>span{transform:translate(2px,-2px)}

/* One clear invitation closes the page. */
.contact-feature{background:var(--blue);color:var(--paper);padding-top:70px;padding-bottom:75px;display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:10px;overflow:hidden;position:relative;isolation:isolate}
.contact-content{position:relative;z-index:1}
.contact-feature .section-label{color:var(--lime);font-size:11px}
.contact-feature h2{font-size:clamp(48px,6.3vw,96px);line-height:1;letter-spacing:-.06em;margin:28px 0 22px;max-width:850px}
.contact-content>p{font-size:clamp(16px,1.8vw,24px);line-height:1.45;color:#e5e3ff;margin-bottom:30px}
.contact-feature .contact-button{background:transparent;border:1px solid rgba(245,245,240,.7);border-radius:0;color:var(--paper);display:inline-flex;gap:36px;align-items:center;padding:17px 23px;font-size:14px;transition:background .25s,color .25s,border-color .25s}
.contact-feature .contact-button:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.contact-feature .contact-button:focus-visible{outline-color:var(--lime)}
.contact-art{position:relative;margin-right:-16%;pointer-events:none}
.contact-art img{display:block;width:132%;max-width:none;margin-left:-18%;height:auto;filter:drop-shadow(13px 25px 12px rgba(15,10,120,.25));transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.contact-feature:hover .contact-art img{transform:rotate(4deg) translateY(-5px)}

@media(min-width:1600px){.essay-grid{gap:65px 45px}.thinking{padding-top:85px;padding-bottom:100px}}
@media(max-width:1000px){.essay-grid{gap:48px 25px}.contact-feature{grid-template-columns:1.5fr 1fr}.contact-feature h2{font-size:clamp(46px,6.4vw,72px)}.contact-art{margin-right:-25%}}
@media(max-width:700px){
  .thinking{padding-top:46px;padding-bottom:54px}
  .thinking-heading{margin:27px 0 28px;gap:12px}
  .thinking h2{font-size:46px}
  .essay-grid{grid-template-columns:1fr;gap:40px}
  .essay-meta{margin-top:16px;margin-bottom:10px}
  .essay-card h3{font-size:34px;max-width:440px}
  .essay-card>p{font-size:16px;margin-top:10px}
  .read-label{margin-top:12px}
  .contact-feature{grid-template-columns:1fr;padding-top:45px;padding-bottom:45px;gap:0}
  .contact-feature h2{font-size:clamp(44px,10.8vw,70px);margin-top:25px;margin-bottom:20px}
  .contact-content>p{font-size:17px;margin-bottom:25px;max-width:240px}
  .contact-feature .contact-button{font-size:13px;gap:30px;padding:16px 20px}
  .contact-art{position:absolute;width:190px;right:-55px;bottom:10px;margin:0;z-index:-1;opacity:.68;transform:rotate(-8deg)}
  .contact-art img{width:100%;margin:0}
}
@media(prefers-reduced-motion:reduce){.editorial-art img,.read-label>span,.contact-art img{transition:none}.essay-card:hover .editorial-art img,.essay-card:focus-visible .editorial-art img,.contact-feature:hover .contact-art img{transform:none}}

/* Headlines carry the page; remove the scaffolding around them. */
.approach-heading{margin-top:0}
.thinking-heading{margin-top:0}
.essay-card h3{margin-top:22px}
.contact-feature h2{margin-top:0}
@media(max-width:700px){.approach-heading,.thinking-heading{margin-top:0}.essay-card h3{margin-top:18px}.contact-feature h2{margin-top:0}}

/* A dimensional brand object, with actual side faces rather than a turning bitmap. */
.sculptural-hero{background:radial-gradient(ellipse at 35% 20%,#514aff 0,#3b36f6 55%,#2c27c7 100%);perspective:850px;isolation:isolate}
.plus-scene{position:absolute;left:50%;top:47%;width:224px;height:224px;transform:translate(-50%,-50%) scale(.95);transform-style:preserve-3d;perspective:850px}
.plus-sculpture{position:absolute;width:224px;height:224px;transform-style:preserve-3d;animation:sculpture-turn 28s linear infinite;will-change:transform}
.plus-face{position:absolute;inset:0;clip-path:var(--plus-outline);backface-visibility:hidden}
.plus-front{transform:translateZ(25px);background:linear-gradient(135deg,#f2f8b2,#e4ef74 48%,#c8d65b);box-shadow:inset 0 0 7px #f5ffd0}
.plus-back{transform:translateZ(-25px) rotateY(180deg);background:linear-gradient(135deg,#e8f28a,#cbd95e)}
.plus-edge{position:absolute;left:0;top:0;height:50px;transform-origin:0 0;backface-visibility:visible}
.plus-shadow{position:absolute;width:60%;height:8%;left:20%;bottom:12%;border-radius:50%;background:#19137c;filter:blur(15px);opacity:.35;pointer-events:none}
@keyframes sculpture-turn{0%{transform:rotateX(-18deg) rotateY(-26deg) rotateZ(-12deg)}25%{transform:rotateX(14deg) rotateY(22deg) rotateZ(78deg)}50%{transform:rotateX(18deg) rotateY(26deg) rotateZ(168deg)}75%{transform:rotateX(-14deg) rotateY(-22deg) rotateZ(258deg)}100%{transform:rotateX(-18deg) rotateY(-26deg) rotateZ(348deg)}}
@media(min-width:1600px){.plus-scene{transform:translate(-50%,-50%) scale(1.15)}}
@media(min-width:701px) and (max-width:1100px){.plus-scene{transform:translate(-50%,-50%) scale(.65)}}
@media(prefers-reduced-motion:reduce){.plus-sculpture{animation:none;transform:rotateX(-15deg) rotateY(-25deg) rotateZ(-12deg)}}

/* The partnership has substance before a visitor opens a row. */
.approach .approach-heading{grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin:0 0 45px}
.approach .approach-heading>p{max-width:470px;font-size:19px;line-height:1.5;color:#51465f}
.capabilities.capability-details{display:block;border:0;background:transparent;box-shadow:none}
.capability-details details{border-top:1px solid #aaa0bb}
.capability-details details:last-child{border-bottom:1px solid #aaa0bb}
.capability-details summary{list-style:none;display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,1.65fr) 28px;gap:35px;align-items:center;padding:27px 0;cursor:pointer}
.capability-details summary::-webkit-details-marker{display:none}
.capability-details summary:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.capability-details h3{font-size:clamp(28px,3.1vw,43px);font-weight:500;margin:0;line-height:1.1}
.cap-summary{font-size:clamp(16px,1.5vw,20px);line-height:1.4;color:#51465f}
.cap-toggle{font-size:30px;font-weight:400;line-height:1;transition:transform .25s;color:var(--blue);justify-self:end}
.capability-details details[open] .cap-toggle{transform:rotate(45deg)}
.cap-body{padding:0 9% 30px calc((100% - 98px)/2.65 + 35px);max-width:1100px}
.capabilities .cap-body p{font-size:17px;line-height:1.65;color:#51465f;max-width:640px}
.capability-details summary:hover h3{color:var(--blue)}
.approach .alignment{align-items:center;gap:25px;padding-top:35px}
@media(max-width:700px){
 .approach .approach-heading{grid-template-columns:1fr;gap:22px;margin-bottom:30px}
 .approach .approach-heading>p{font-size:17px;max-width:420px}
 .capability-details summary{grid-template-columns:1fr 24px;gap:12px;padding:24px 0}
 .capability-details h3{font-size:32px;margin:0}
 .cap-summary{grid-column:1;grid-row:2;font-size:16px;max-width:290px}
 .cap-toggle{grid-column:2;grid-row:1;font-size:28px}
 .cap-body{padding:0 0 25px}
 .capabilities .cap-body p{font-size:16px}
 .approach .alignment{align-items:start;gap:20px}
}

/* A calm explanation between two moving brand objects. */
.positioning{background:var(--paper);padding-top:36px;padding-bottom:65px}
.positioning-inner{max-width:1140px;margin:auto}
.positioning h2{font-size:clamp(36px,4.3vw,64px);font-weight:500;line-height:1.08;letter-spacing:-.055em;max-width:1050px}
.positioning h2>span{color:var(--blue)}
.positioning-copy{max-width:780px;margin-top:30px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;letter-spacing:-.015em;color:#4c4c49}
.positioning-copy p+p{margin-top:15px}
.cap-body p+p{margin-top:14px}
.approach .alignment{justify-content:flex-end}
/* A brief closing invitation rather than another full-size hero. */
.contact-feature{padding-top:42px;padding-bottom:44px;grid-template-columns:1.7fr 1fr;min-height:0}
.contact-feature h2{font-size:clamp(44px,4.8vw,68px);margin-bottom:16px}
.contact-content>p{font-size:18px;margin-bottom:22px}
.contact-art{max-width:300px;justify-self:center;margin:0;width:100%}
.contact-art img{width:115%;margin-left:-8%}
@media(min-width:1600px){.contact-feature{padding-left:max(var(--pad),calc((100vw - 1350px)/2));padding-right:max(var(--pad),calc((100vw - 1350px)/2))}}
@media(max-width:700px){
 .positioning{padding-top:8px;padding-bottom:40px}
 .positioning h2{font-size:clamp(31px,8vw,43px);line-height:1.1}
 .positioning-copy{font-size:17px;margin-top:24px}
 .approach .alignment{align-items:flex-start}
 .contact-feature{display:block;padding-top:36px;padding-bottom:37px}
 .contact-feature h2{font-size:44px;margin-bottom:16px}
 .contact-content>p{font-size:16px;margin-bottom:20px}
 .contact-art{width:160px;right:-45px;bottom:12px;max-width:none;opacity:.6}
 .contact-art img{width:100%;margin-left:0}
}

/* One hero message, aligned with the sculptural plus. */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(240px,28%);align-items:center;margin-bottom:14px}
.hero-message{position:relative;z-index:1;min-width:0}
.hero-description{font-size:clamp(18px,1.6vw,23px);font-weight:450;line-height:1.45;letter-spacing:-.025em;max-width:590px;margin-top:34px}
.hero .sculptural-hero{align-self:stretch;min-height:365px}
.hero{padding-bottom:55px}
/* The middle section explains the model, rather than acting as a spacer. */
.positioning{background:var(--blue);color:var(--paper);padding-top:70px;padding-bottom:75px}
.positioning-inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:70px;align-items:center;max-width:1140px}
.positioning h2{font-size:clamp(34px,3.5vw,52px);line-height:1.13;letter-spacing:-.05em;max-width:660px}
.positioning h2>span{color:var(--lime)}
.positioning-copy{max-width:440px;margin-top:0;color:#f0efff;font-size:clamp(17px,1.45vw,20px);line-height:1.55}
.positioning-copy p+p{margin-top:24px;color:var(--lime)}
@media(max-width:1000px) and (min-width:701px){.hero-description{font-size:18px;max-width:480px}.hero .sculptural-hero{min-height:320px}.positioning-inner{gap:35px}.positioning h2{font-size:36px}}
@media(max-width:700px){
 .hero-grid{display:block;margin-bottom:0}
 .hero .sculptural-hero{display:none}
 .hero-description{font-size:18px;margin-top:28px;max-width:380px;line-height:1.45}
 .hero{padding-bottom:37px}
 .positioning{padding-top:39px;padding-bottom:42px}
 .positioning-inner{grid-template-columns:1fr;gap:27px}
 .positioning h2{font-size:clamp(30px,8vw,42px);line-height:1.12}
 .positioning-copy{font-size:17px;margin:0}
 .positioning-copy p+p{margin-top:18px}
}
