/* Prime Growth: forest, orange and room to breathe. */
:root{--orange-ink:#B04407;--on-orange:#082E20}
.title-orange{color:var(--orange-ink)}
.on-navy .title-orange{color:var(--accent)}
.eyebrow{color:var(--orange-ink)}
.on-navy .eyebrow{color:#FFAD72}
.btn--primary,.btn--growth,.island-hero__cta{background:var(--accent);border-color:var(--accent);color:var(--on-orange);box-shadow:none}
.btn--primary:hover,.btn--growth:hover,.island-hero__cta:hover{background:#FF943E;border-color:#FF943E;color:var(--on-orange);transform:translateY(-2px)}
.btn .icon{width:20px;height:20px}
.island-hero__cta span{color:inherit}
.page-home .home-chrome .hdr__cta .btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-orange)}
.page-home .home-chrome .hdr__cta .btn--primary:hover{background:#FF943E;border-color:#FF943E;color:var(--on-orange)}
.btn--outline{border:1px solid var(--brand);color:var(--brand);background:transparent}
.btn--outline:hover{background:var(--brand);color:var(--white)}
.plan--featured::after{content:"Recommended";font-size:.75rem;letter-spacing:.045em}
.agency-doodles::after{opacity:.035;background-size:800px auto}
.agency-doodles.hero::after,.agency-doodles.ft::after,.agency-doodles.section--navy::after{opacity:.035}
.island-hero__copy h1 .title-orange{color:var(--orange-ink)}
.home-about{padding-block:clamp(4rem,8vw,8rem)}
.home-about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.about-playground{position:relative;isolation:isolate;overflow:hidden;border-radius:36px;background:#F3EBDC;aspect-ratio:1}
.studio-dog{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform-origin:50% 85%}
.about-playground__badge{position:absolute;left:1.5rem;top:1.5rem;z-index:2;display:flex;gap:.7rem;align-items:center;border-radius:18px;padding:.8rem 1rem;background:var(--brand);color:var(--white)}
.about-playground__badge strong{font-family:var(--font-head);font-size:3rem;line-height:1;color:var(--accent)}
.about-playground__badge span{font-size:.8rem;line-height:1.3}
.dog-play{position:absolute;bottom:1.15rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:99px;padding:.75rem 1rem;background:var(--white);color:var(--brand);box-shadow:0 3px 18px #104B3814;font-size:.875rem;white-space:nowrap;max-width:95%}
.dog-play .icon{width:17px;height:17px;color:var(--orange-ink)}
.about-playground.is-playing .studio-dog{animation:dog-play 1.2s ease-in-out 2}
@keyframes dog-play{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-10px) rotate(-2deg) scale(.985)}42%{transform:translateY(0) rotate(1deg)}62%{transform:translateY(-6px) rotate(2deg) scale(.99)}82%{transform:translateY(0) rotate(-1deg)}}
.home-about__copy h2,.home-services h2,.home-contact h2{font-size:clamp(2.4rem,4.8vw,4.4rem);letter-spacing:-.05em;line-height:1.1}
.home-about__copy .lead{margin:1.5rem 0 1rem;color:var(--brand);font-size:1.2rem;line-height:1.55}
.home-about__copy>p:not(.lead){color:var(--muted)}
.home-about__copy .btn{margin-top:.65rem}
.brand-band{background:var(--accent);color:var(--on-orange);padding:2.5rem 0 3rem}
.brand-band__head{text-align:center;margin-bottom:2.5rem}
.brand-band h2{font-size:clamp(1.4rem,2.7vw,2rem);line-height:1.3;color:var(--on-orange)}
.brand-band h2 .title-orange{color:var(--on-orange);font-weight:700}
.logo-marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.logo-marquee__track{display:flex;width:max-content;animation:brand-drift 34s linear infinite}
.logo-marquee__group{display:flex;align-items:center;justify-content:space-around;gap:clamp(3rem,6vw,6rem);min-width:100vw;flex-shrink:0;padding-inline:clamp(1.5rem,3vw,3rem)}
.logo-marquee:hover .logo-marquee__track,.logo-marquee:focus-within .logo-marquee__track{animation-play-state:paused}
.brand-name,.client-logo{display:flex;align-items:center;justify-content:center;min-width:160px;width:185px;height:72px;color:var(--on-orange);white-space:nowrap}
.brand-name{font-family:var(--font-head);font-size:1.2rem;font-weight:700;letter-spacing:-.04em}
.client-logo img{max-width:180px;max-height:58px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
@keyframes brand-drift{to{transform:translateX(-50%)}}
.home-services{padding-block:clamp(4rem,7vw,7rem)}
.home-services__heading{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end;margin-bottom:3.5rem}
.home-services__heading p{color:var(--muted);max-width:47ch}
.service-rows{border-top:1px solid #104B3845}
.service-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr) 48px;gap:clamp(1rem,2vw,2rem);padding:2rem .6rem;border-bottom:1px solid #104B382B;align-items:center;color:var(--brand);transition:background .2s ease,padding .2s ease}
.service-row:hover,.service-row:focus-visible{background:#FF7A210C;padding-inline:1rem;color:var(--brand)}
.service-row__icon{width:58px;height:58px;background:#FF7A211D;border-radius:18px;display:grid;place-items:center;color:var(--orange-ink)}
.service-row__icon .icon{width:29px;height:29px}
.service-row__title h3{font-size:clamp(1.25rem,2.05vw,1.85rem);line-height:1.18;letter-spacing:-.035em}
.service-row__title>span{display:block;color:var(--muted);font-size:.875rem;margin-top:.55rem;line-height:1.4}
.service-row__description p{margin:0 0 .65rem;color:var(--ink-soft);font-size:1rem;line-height:1.55}
.service-row__description small{font-size:.875rem;color:var(--muted)}
.service-row__arrow{width:44px;height:44px;display:grid;place-items:center;border:1px solid #104B3840;border-radius:50%;transition:background .2s ease,transform .2s ease}
.service-row:hover .service-row__arrow{background:var(--accent);border-color:var(--accent);transform:rotate(7deg)}
.service-row__arrow .icon{width:23px;height:23px}
.platform-band{background:var(--accent);color:var(--on-orange);padding:2.5rem 0 3rem}
.platform-band__heading{text-align:center;margin-bottom:2rem}
.platform-band .eyebrow{color:var(--on-orange);font-size:.8rem}
.platform-band h2{font-size:clamp(1.55rem,2.7vw,2.4rem);color:var(--on-orange)}
.platform-band h2 span{font-weight:700}
.platform-logo{display:flex;align-items:center;gap:.75rem;white-space:nowrap;font-family:var(--font-head);font-size:1.25rem;font-weight:700}
.platform-logo img{width:34px;height:34px}
.page-home #work{padding-block:clamp(4rem,7vw,6rem);background:var(--white)}
.page-home #work .section__head h2{font-size:clamp(2.2rem,4.3vw,3.7rem);letter-spacing:-.045em}
.page-home #faq{background:var(--white);padding-top:1rem}
.home-contact{padding-top:2rem;padding-bottom:clamp(3rem,6vw,5rem)}
.home-contact__shell{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:32px;overflow:hidden;border:1px solid var(--line)}
.home-contact__intro{padding:clamp(2rem,4.5vw,4.5rem);background:var(--brand);color:var(--white)}
.home-contact__intro .eyebrow{color:#FFAD72}
.home-contact__intro h2{color:var(--white);font-size:clamp(2.1rem,4vw,3.8rem)}
.home-contact__intro h2 span{color:var(--accent)}
.home-contact__intro p{color:#F7F3E8CF;margin:1.8rem 0 2.5rem;line-height:1.7}
.home-contact__note{display:flex;align-items:center;gap:1rem;font-size:.95rem;color:var(--white)}
.home-contact__note .icon{width:36px;height:36px;color:var(--accent)}
.home-contact__form{padding:clamp(1.5rem,3.5vw,3.5rem);background:#FFFDF6}
.home-contact__form h3{font-size:1.5rem;letter-spacing:-.025em;margin-bottom:1.5rem}
.home-contact__form .field input,.home-contact__form .field select,.home-contact__form .field textarea{background:var(--white)}
.home-contact__form textarea{min-height:115px}
.page-home .ft__cta{display:none}
.ft{padding-top:3rem}
.ai-package{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:3rem;border:1px solid var(--line);background:var(--white);padding:clamp(1.5rem,4vw,3.5rem);border-radius:24px}
.ai-package h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:1.25rem}
.ai-package__scope{background:var(--brand);padding:2rem;border-radius:20px;color:var(--white)}
.ai-package__scope .checks li{color:var(--white);margin-bottom:.8rem;font-size:1rem}
.ai-package__price{font-family:var(--font-head);font-size:2.25rem;font-weight:700;letter-spacing:-.04em;margin:1.3rem 0 .7rem;color:var(--orange-ink)}
.ai-package__scope h3{color:#FFAD72;margin-bottom:1.3rem}
.ai-scope-note{color:var(--muted);font-size:.9rem}
.is-offscreen .logo-marquee__track{animation-play-state:paused}
.no-js .logo-marquee__track{animation:none;width:auto}
.no-js .logo-marquee__group{flex-wrap:wrap;justify-content:center;gap:1.5rem}
@media(max-width:960px){.home-about__grid{gap:2.5rem}.home-about__copy h2{font-size:2.8rem}.service-row{grid-template-columns:50px minmax(0,1fr) 42px;gap:1rem;padding-block:1.5rem}.service-row__icon{width:46px;height:46px;border-radius:14px}.service-row__description{grid-column:2;grid-row:2}.service-row__arrow{grid-column:3;grid-row:1}.service-row__title h3{font-size:1.5rem}.service-row__description small{font-size:.875rem}.home-contact__shell{grid-template-columns:1fr 1.1fr}.home-contact__intro h2{font-size:2.65rem}}
@media(max-width:700px){.home-about__grid{grid-template-columns:1fr;gap:2rem}.about-playground{max-width:520px;width:100%;margin-inline:auto;border-radius:24px}.home-about__copy h2,.home-services h2{font-size:clamp(2rem,7.5vw,3rem)}.home-services__heading{grid-template-columns:1fr;gap:1.25rem;margin-bottom:2.5rem}.service-row__title h3{font-size:1.3rem}.service-row__description p{font-size:1rem}.service-row__title>span{font-size:.875rem}.service-row__description{grid-column:1/4;padding-left:0}.brand-band h2{max-width:25ch;margin:auto}.home-contact__shell{grid-template-columns:1fr;border-radius:24px}.home-contact__intro h2{font-size:clamp(2.3rem,8vw,3.5rem)}.home-contact__intro h2 br{display:none}.home-contact__intro h2 br::after{content:' '}.home-contact__intro h2{max-width:11ch}.home-contact__intro p{margin-block:1.4rem}.home-contact__note{display:none}.ai-package{grid-template-columns:1fr;gap:1.5rem}.ai-package__scope{padding:1.5rem}.logo-marquee__group{gap:2.5rem;padding-inline:1.25rem}.platform-logo{font-size:1.1rem}.platform-logo img{width:28px;height:28px}.platform-band,.brand-band{padding-block:2rem}.brand-name,.client-logo{min-width:150px;width:160px}}
@media(prefers-reduced-motion:reduce){logo-marquee__track{animation:none;width:auto}.logo-marquee__group{flex-wrap:wrap;justify-content:center;gap:1.5rem;padding-inline:1rem}.logo-marquee__group[aria-hidden="true"]{display:none}.studio-dog{animation:none!important}.service-row,.service-row__arrow{transition:none}.btn--primary:hover,.btn--growth:hover{transform:none}}
/* About - journey timeline. Above 1100px it is a horizontal infographic:
   four cards in a row with a wire that runs along their tops and loops
   around every second one, drawn in left to right by scroll progress.
   Below that it falls back to a vertical rail. Both are scroll-linked. */
.journey__head{text-align:center;max-width:34rem;margin:0 auto clamp(2.5rem,5vw,4rem)}
.journey__head h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em;line-height:1.1;margin:.6rem 0 0}
.journey__track{--journey-progress:0;--jgap:clamp(1rem,2vw,1.75rem);position:relative}
.no-js .journey__track{--journey-progress:1}
.journey__steps{position:relative;z-index:1;list-style:none;margin:0;padding:0}
.journey__step{position:relative}
.journey__no{display:block;font-family:var(--font-head);font-weight:700;line-height:1;letter-spacing:-.05em;color:#FFAD72}
.journey__copy h3{letter-spacing:-.04em;line-height:1.18;margin:.45rem 0 .6rem}
.journey__copy p{font-size:1rem;line-height:1.6;margin:0}
.journey__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:600;font-size:.95rem;color:#FFAD72}
.journey__link .icon{width:18px;height:18px}
.journey__link:hover{color:var(--white)}
.journey__tile{display:grid;place-items:center;color:var(--white)}
.journey__tile .icon{color:var(--accent)}
.journey__tile span{font-family:var(--font-head);font-weight:700;letter-spacing:-.03em}

/* Tile lands first, then the number, heading and description a beat apart. */
.journey__steps.is-ready .journey__tile,
.journey__steps.is-ready .journey__no,
.journey__steps.is-ready .journey__copy h3,
.journey__steps.is-ready .journey__copy p,
.journey__steps.is-ready .journey__link{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.journey__steps.is-ready .is-active .journey__tile{opacity:1;transform:none;transition-delay:0ms}
.journey__steps.is-ready .is-active .journey__no{opacity:1;transform:none;transition-delay:120ms}
.journey__steps.is-ready .is-active .journey__copy h3{opacity:1;transform:none;transition-delay:200ms}
.journey__steps.is-ready .is-active .journey__copy p{opacity:1;transform:none;transition-delay:280ms}
.journey__steps.is-ready .is-active .journey__link{opacity:1;transform:none;transition-delay:360ms}

/* --- Horizontal infographic --- */
@media(min-width:1100px){
 .journey__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--jgap);padding:30px 30px 34px}
 .journey__step{display:flex;flex-direction:column;padding:1.5rem 1.35rem 1.6rem;border-radius:20px;background:#F7F3E80D;border:1px solid #F7F3E814}
 .journey__visual{order:1;margin-bottom:1.1rem}
 .journey__copy{order:2;display:flex;flex-direction:column;flex:1}
 .journey__tile{width:54px;height:54px;border-radius:50%;background:#F7F3E812;border:1px solid #F7F3E824}
 .journey__tile .icon{width:26px;height:26px}
 .journey__tile span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .journey__no{font-size:2rem}
 .journey__copy h3{font-size:1.3rem}
 .journey__copy p{font-size:.95rem}
 .journey__link{margin-top:auto;padding-top:1rem}
 /* The wire shares the steps' columns, gap and side padding, so its cells
    line up with the cards; it spans the full track height, so the loops
    clear them top and bottom. */
 .journey__wire{position:absolute;inset:0;z-index:0;display:grid;
   grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--jgap);padding:0 30px;pointer-events:none;
   clip-path:inset(0 calc((1 - var(--journey-progress)) * 100%) 0 0)}
 .journey__wire span{margin-inline:calc(var(--jgap) / -2);border-color:#F7F3E82E}
 .journey__wire span:nth-child(odd){border-top:2px solid #F7F3E82E}
 .journey__wire span:nth-child(even){border:2px solid #F7F3E82E;border-radius:26px}
 .journey__wire::before,.journey__wire::after{content:"";position:absolute;top:-7px;width:14px;height:14px;
   border-radius:50%;background:var(--accent);box-shadow:0 0 14px #FF7A2166}
 .journey__wire::before{left:calc(30px - var(--jgap) / 2 - 7px)}
 .journey__wire::after{right:calc(30px - var(--jgap) / 2 - 7px)}
}

/* --- Vertical rail, narrower screens --- */
@media(max-width:1099px){
 .journey__wire{display:none}
 .journey__steps::before,.journey__steps::after{content:"";position:absolute;left:22px;top:0;width:2px;pointer-events:none}
 .journey__steps::before{bottom:0;background:#F7F3E81F}
 .journey__steps::after{height:calc(var(--journey-progress) * 100%);background:linear-gradient(180deg,#FFAD7200,var(--accent));box-shadow:0 0 16px #FF7A2159}
 .journey__step{display:grid;grid-template-columns:1fr;gap:1.25rem;padding-left:62px;padding-block:1.6rem}
 .journey__step::before{content:"";position:absolute;left:22px;top:2.4rem;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--navy);border:2px solid #F7F3E840;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
 .journey__step.is-active::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 7px #FF7A2124}
 .journey__visual{order:1;justify-self:start}
 .journey__copy{order:2}
 .journey__tile{grid-auto-flow:column;gap:.65rem;padding:.7rem 1.05rem;border-radius:16px;background:#F7F3E80F;border:1px solid #F7F3E81F}
 .journey__tile .icon{width:26px;height:26px}
 .journey__tile span{font-size:1rem}
 .journey__no{font-size:clamp(2.2rem,4vw,3rem)}
 .journey__copy h3{font-size:clamp(1.45rem,2.6vw,2rem)}
}
@media(prefers-reduced-motion:reduce){
 .journey__steps.is-ready .journey__tile,.journey__steps.is-ready .journey__no,
 .journey__steps.is-ready .journey__copy h3,.journey__steps.is-ready .journey__copy p,
 .journey__steps.is-ready .journey__link{opacity:1;transform:none;transition:none}
}
/* About - sectors band, built on the home page platform band: same orange
   ground and marquee, with text chips in place of platform logos. */
.sector-band .platform-band__heading p{max-width:56ch;margin:1rem auto 0;color:var(--on-orange);font-size:1rem;line-height:1.6}
.sector-chip{display:flex;align-items:center;white-space:nowrap;font-family:var(--font-head);font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:var(--on-orange);border:1px solid #082E2033;border-radius:999px;padding:.6rem 1.2rem}
@media(max-width:700px){.sector-chip{font-size:.95rem;padding:.5rem 1rem}}
/* Home - reach band: dotted world map over three figures. */
.reach__head{text-align:center;max-width:38rem;margin:0 auto}
.reach__head h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em;line-height:1.1;margin:.6rem 0 .9rem}
.reach__head p{color:var(--muted);margin:0 auto;max-width:52ch}
.reach__map{margin:clamp(2rem,5vw,3.5rem) auto clamp(1.5rem,4vw,2.5rem);max-width:920px}
.reach__map img{display:block;width:100%;height:auto}
.reach__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);margin:0;padding:0}
.reach__stat{display:flex;flex-direction:column-reverse;align-items:center;text-align:center}
.reach__stat dd{margin:0;font-family:var(--font-head);font-weight:700;line-height:1;letter-spacing:-.05em;
  font-size:clamp(2.6rem,6vw,4.4rem);color:var(--brand);font-variant-numeric:tabular-nums}
.reach__stat dt{margin-top:.7rem;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink)}
@media(max-width:700px){.reach__stats{grid-template-columns:1fr;gap:2rem}}
.reach__plus{font-size:.45em;font-weight:700;vertical-align:.9em;margin-left:.1em}
/* Location pins sit over the map in percentage coordinates, so they stay put
   at any width. They drop in one after another once the map scrolls in, and
   the ring keeps pulsing after. */
.reach__map{position:relative}
.reach__pins{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.reach__pin{position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--accent);opacity:0;transform:scale(.2)}
.reach__pin span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.reach__pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.reach__map.is-in .reach__pin{animation:pin-drop .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i) * 110ms)}
.reach__map.is-in .reach__pin::after{animation:pin-pulse 2.4s ease-out infinite;animation-delay:calc(var(--i) * 110ms + 450ms)}
@keyframes pin-drop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes pin-pulse{0%{opacity:.7;transform:scale(.6)}70%,100%{opacity:0;transform:scale(2.2)}}
.no-js .reach__pin{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reach__pin{opacity:1;transform:none}
  .reach__map.is-in .reach__pin,.reach__map.is-in .reach__pin::after{animation:none}
}
@media(max-width:700px){.reach__pin{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}}
