/* Boceto 8: shared refinements and motion. Base typography and palette come from Figma. */

/* Our Work closing band: Figma 366:5 / 366:68, separate from the project grid. */
.work-cta {
  --gradient:linear-gradient(to right,#ff7b20,#ee5409);
  display:flex;flex-direction:column;align-items:center;gap:0;
  margin:0;padding:80px var(--gutter) 100px;background:#2b1910;text-align:center;
}
html[data-theme=light] .work-cta { background:#f8e3d0; }
.work-cta-content { display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;max-width:1700px; }
.work-cta p { width:100%;max-width:1240px;margin:0;font-size:24px;font-weight:400;line-height:1.3;color:var(--muted); }
.work-cta strong { color:#fff;font-weight:700; }
html[data-theme=light] .work-cta strong { color:#18110c; }
.work-cta .button { width:301px;min-width:0;max-width:100%;height:54px;min-height:54px;font-size:16px;gap:16px; }
.work-cta-arrow { display:block;flex:none; }
@media(max-width:600px) {
  .work-cta { padding:56px var(--gutter) 64px;margin:0;gap:0; }
  .work-cta-content { gap:28px; }
  .work-cta p { font-size:20px;line-height:1.4; }
}

/* The Boceto 6 photo reveal stays inside the existing gallery mask. */
.office-gallery-slide .image-frame {
  transform:none;
  will-change:auto;
}
.office-gallery-slide .image-frame img {
  transform:scale(1.025);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.js .office-gallery-slide:not(.is-photo-visible) .image-frame img {
  transform:translate3d(0,22px,0) scale(1.12);
}
.office-gallery-slide:hover .image-frame img {
  transform:scale(1.045);
}

/* The original Boceto 4 trail belongs only to Services and How we work. */
.connected-sections {
  background:linear-gradient(to bottom,var(--paper) 0 var(--services-height,50%),var(--alternate) var(--services-height,50%) 100%);
}
.connected-sections > .services,
.connected-sections > .process {
  position:relative;
  z-index:1;
  background:transparent!important;
}
.services-stage { z-index:2;background:transparent!important; }
.about,.join { isolation:isolate; }
.about > .section-top,
.about > .about-intro,
.about > .office-gallery { position:relative;z-index:2; }
.ambient-trail { display:none!important; }
.splash-cursor { z-index:1; }
.read-progress { position:fixed;top:0;left:0;width:100%;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;z-index:150;pointer-events:none; }
:root { --trail-a:#f66c22;--trail-b:#ffc08a;--trail-cloud-opacity:.25;--trail-line-opacity:.4; }
html[data-theme=light] { --trail-a:#ee7436;--trail-b:#ffba7a;--trail-cloud-opacity:.2;--trail-line-opacity:.27; }
.cosmic-trail { position:absolute;left:0;right:0;top:-2%;width:100%;height:104%;z-index:0;opacity:1;overflow:hidden;pointer-events:none; }
.cosmic-trail .journey-svg { width:100%;height:100%;opacity:1;overflow:visible; }
.trail-stop-a { stop-color:var(--trail-a); }
.trail-stop-b { stop-color:var(--trail-b); }
.cosmic-trail path { fill:none;stroke:url('#trail-gradient');stroke-linecap:round; }
.cosmic-trail .trail-cloud { stroke-width:104;opacity:var(--trail-cloud-opacity);filter:url('#trail-haze'); }
.cosmic-trail .trail-halo { stroke-width:16;opacity:.3;filter:url('#trail-soft'); }
.cosmic-trail #journey-path { stroke-width:2.5;opacity:var(--trail-line-opacity); }
.js .cosmic-trail path { stroke-dasharray:var(--path-length);stroke-dashoffset:var(--path-length); }
.cosmic-trail #journey-spark { fill:var(--trail-b);stroke:none;opacity:0;filter:url('#trail-soft'); }

/* The rail includes room for the entire stroke, including a lifted card. */
.service-viewport { padding-top:8px;padding-bottom:14px; }
.service-card {
  position:relative;
  border-color:#4D3225;
}
.service-card:hover,.service-card:focus-visible {
  background:#190F0A!important;
  border-color:#4D3225;
  color:#fff5ec;
}
.service-card:is(:hover,:focus-visible) :is(.service-problem,.service-description) { color:#c4b4a6; }
@media(min-width:1701px) {
  .service-card,.services.rail-fits .service-card {
    flex:none;
    display:grid;
    grid-template-columns:38% minmax(0,1fr);
    column-gap:5%;
    align-items:center;
    width:clamp(580px,34vw,690px);
    max-width:none;
    height:300px;
    min-height:0;
    padding:40px 30px 28px;
  }
  .services.rail-fits .service-rail { width:max-content;justify-content:flex-start; }
  .service-card-top { position:absolute;inset:23px 28px auto;font-size:12px; }
  .service-art { grid-column:1;height:100%;min-height:0;max-height:none;margin:0; }
  .service-art img { width:100%;height:100%; }
  .service-copy { grid-column:2;max-width:360px; }
  .service-problem { font-size:11px;line-height:1.55;min-height:0; }
  .service-card h3 { font-size:32px;line-height:1.08;margin:10px 0 14px; }
  .service-description { font-size:14px;line-height:1.5;max-width:360px; }
}
@media(min-width:1701px) and (max-height:740px) {
  .service-card { height:280px;padding-block:35px; }
  .service-card h3 { font-size:30px; }
  .service-description { font-size:12px; }
}

/* Apple Intelligence: a left / center / right sequence, with a distinct pose per iPad. */
.thea-feature { height:auto;margin:48px 0 72px; }
.thea-stage {
  position:relative;
  top:auto;
  height:auto!important;
  min-height:0;
  display:block;
  padding:0 0 40px;
}
.thea-devices {
  display:grid;
  grid-template-columns:repeat(20,minmax(0,1fr));
  row-gap:0;
  width:100%;
  height:auto!important;
  min-height:0;
  padding:clamp(65px,7vw,110px) clamp(24px,3vw,50px) clamp(240px,32vh,360px);
  perspective:none;
}
.thea-tablet-slot {
  position:relative;width:100%;max-width:none;aspect-ratio:1353/940;perspective:1800px;
  grid-column:1 / span 12;grid-row:1;
  --device-rx:14deg;--device-ry:-14deg;--device-rz:-11deg;
  --float-distance:28vh;--float-angle:25deg;--float-delay:.25s;
}
.thea-tablet-slot:nth-child(2) {
  grid-column:5 / span 12;grid-row:2;margin:0;
  --device-rx:12deg;--device-ry:16deg;--device-rz:8deg;
  --float-distance:37vh;--float-delay:0s;
}
.thea-tablet-slot:nth-child(3) {
  grid-column:9 / span 12;grid-row:3;margin:0;
  --device-rx:24deg;--device-ry:-18deg;--device-rz:16deg;
  --float-distance:32vh;--float-angle:20deg;--float-delay:0s;
}
.thea-tablet {
  position:relative;
  inset:auto;
  width:100%;
  max-width:none;
  opacity:1;
  transform:translate3d(0,0,0) rotateX(var(--device-rx)) rotateY(var(--device-ry)) rotateZ(var(--device-rz));
  transition:transform 2.5s cubic-bezier(.165,.84,.44,1) var(--float-delay,0s),filter .4s;
}
.js .thea-tablet-slot:not(.is-float-visible) .thea-tablet {
  transform:translate3d(0,var(--float-distance),0) rotateX(var(--device-rx)) rotateY(var(--device-ry)) rotateZ(calc(var(--device-rz) + var(--float-angle)));
}
.thea-tablet-slot.is-float-skipped .thea-tablet { transition:none; }
.thea-heading { position:absolute;top:clamp(65px,7vw,110px);right:0;width:26%;max-width:350px;padding:0; }
.thea-tablet-slot { z-index:1; }
.thea-tablet-slot:nth-child(2) { z-index:2; }
.thea-tablet-slot:nth-child(3) { z-index:3; }
.tablet-display img { object-fit:cover; }
/* The client artwork has a transparent canvas. Align its visible lettering. */
.thea-heading h3 { position:relative;width:140px;height:44px;overflow:hidden; }
.thea-brand { position:absolute;left:-38.8px;top:-14.4px;width:217.5px;height:72.5px;max-width:none;object-fit:contain; }

/* One rounded mask; the photo and the liquid canvas both cover it completely. */
.work-card .work-visual {
  border:0;
  border-radius:24px;
  overflow:hidden;
  background:transparent!important;
  clip-path:inset(0 round 24px);
  transform:translateZ(0);
  -webkit-mask-image:linear-gradient(#fff,#fff);
}
.work-project-image {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  border:0;
  border-radius:0!important;
  object-fit:cover;
  transform:scale(calc(1.04 + var(--hover-amount,0)*.035));
  transition:transform 1.1s var(--ease);
}
.project-distortion-canvas { border-radius:inherit; }

/* Exact Clutch CTA dimensions from the 1440 px Figma frames. */
.testimonial-layout { grid-template-columns:642fr 566fr;gap:32px;align-items:start; }
.testimonials .clutch-card { min-height:223px;border-radius:24px;padding:40px;gap:24px;background:#17110d;border-color:#4D3225; }
.clutch-word { font-size:clamp(58px,5.556vw,80px);font-weight:800;line-height:1.07;letter-spacing:-.04em;color:#fff; }
.clutch-link { display:block;font-size:clamp(18px,1.667vw,24px);font-weight:400;line-height:1.3;text-align:center;color:#c4b4a6; }
html[data-theme=light] .testimonials .clutch-card { background:#ffefde;border-color:#e6cdb5; }
html[data-theme=light] .clutch-word { color:#18110c; }
html[data-theme=light] .clutch-link { color:#766254; }
.testimonials .clutch-card:hover { background:var(--gradient);border-color:transparent;color:#fff; }
.testimonials .clutch-card:hover :is(.clutch-word,.clutch-link,.clutch-dot) { color:#fff; }

/* Hero: keep the text and both actions on one left edge at every breakpoint. */
.hero-buttons { flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left;margin-inline:0; }
.hero-buttons .text-link { justify-content:flex-start;min-width:0; }
.hero-content,.hero-lower { text-align:left; }
.planet-scene { height:auto;aspect-ratio:1; }
#planet-fallback-canvas { position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none; }

/* Light Services uses the two Figma surfaces, with the same soft stroke. */
html[data-theme=light] .service-card { background:#f8e3d0;border-color:#e6cdb5;color:#18110c; }
html[data-theme=light] .service-card:is(:hover,:focus-visible) { background:#fff8ef!important;border-color:#e6cdb5;color:#18110c; }
html[data-theme=light] .service-card:is(:hover,:focus-visible) :is(.service-problem,.service-description) { color:#766254; }

/* Testimonials has no scroll trail. Its approved CTA states remain intact. */
.services-stage,.process,.testimonials { isolation:isolate; }
.testimonials > .section-top,.testimonials > .testimonial-layout { position:relative;z-index:2; }
.testimonials { overflow:hidden; }
html[data-theme=light] .testimonials .clutch-card:is(:hover,:focus-visible),
html[data-theme=dark] .testimonials .clutch-card:is(:hover,:focus-visible) { background:var(--gradient);border-color:#ffbe6859;color:#fff; }
html[data-theme] .testimonials .clutch-card:is(:hover,:focus-visible) :is(.clutch-word,.clutch-link,.clutch-dot) { color:#fff; }

/* Contain the continuous client rail without changing its approved artwork. */
.clients-marquee { margin-inline:0;max-width:1700px;width:100%;margin-left:auto;margin-right:auto; }

/* Part of VFG: Figma's 758 / 434 columns and a restrained dissolve. */
.group-intro { grid-template-columns:minmax(0,758fr) minmax(0,434fr);gap:48px; }
.group-intro h2 { max-width:none;font-size:clamp(44px,4.444vw,80px);line-height:1.07; }
.group-intro > div { gap:24px; }
.group-row { transition:background-color .5s ease,border-color .5s ease; }
.group-description { transition:color .45s ease,transform .65s var(--ease); }
.group-row:is(:hover,:focus-visible,.is-previewing) .group-description { color:var(--ink);transform:translateX(4px); }
.group-row-arrow { transition:background-color .45s ease,transform .7s var(--ease),color .45s ease; }
.group-row-arrow { position:relative;isolation:isolate;overflow:hidden; }
.group-row-arrow::before { content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#000;opacity:0;transition:opacity .45s ease; }
.group-row:is(:hover,:focus-visible,.is-previewing) .group-row-arrow { background:var(--gradient);transform:translateX(3px); }
.group-row:is(:hover,:focus-visible,.is-previewing) .group-row-arrow::before { opacity:1; }
.group-name > img { display:none!important;opacity:0;pointer-events:none;filter:none!important;mix-blend-mode:normal!important;transition:opacity .45s ease; }
html[data-theme=dark] .group-name > img[data-logo-mode=dark],
html[data-theme=light] .group-name > img[data-logo-mode=light] { display:block!important; }
html[data-theme=dark] .group-name > img[data-logo-mode=dark][data-logo-state=default],
html[data-theme=light] .group-name > img[data-logo-mode=light][data-logo-state=default] { opacity:1; }
html[data-theme=dark] .group-name > img[data-logo-mode=dark][data-logo-state=hover],
html[data-theme=light] .group-name > img[data-logo-mode=light][data-logo-state=hover] { opacity:0; }
html[data-theme=dark] .group-row:is(:hover,:focus-visible,.is-previewing) .group-name > img[data-logo-mode=dark][data-logo-state=default],
html[data-theme=light] .group-row:is(:hover,:focus-visible,.is-previewing) .group-name > img[data-logo-mode=light][data-logo-state=default] { opacity:0; }
html[data-theme=dark] .group-row:is(:hover,:focus-visible,.is-previewing) .group-name > img[data-logo-mode=dark][data-logo-state=hover],
html[data-theme=light] .group-row:is(:hover,:focus-visible,.is-previewing) .group-name > img[data-logo-mode=light][data-logo-state=hover] { opacity:1; }
.vertical-preview { transition:opacity .4s ease,transform .65s var(--ease); }
.vertical-preview-card { display:block;visibility:hidden;opacity:0;transform:translateY(10px) scale(.975);border-radius:16px;transition:opacity .4s ease,transform .65s var(--ease),visibility 0s .4s; }
.vertical-preview-card.is-active { display:block;visibility:visible;opacity:1;transform:none;transition-delay:0s; }
.preview-real-site { position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;border:0;border-radius:0; }

/* Eight photos rise in Figma's right column; the reference-3 pitch/depth is scrubbed by native page scroll. */
.join { background:#2b1910;height:calc(var(--join-stage,100svh) + var(--join-travel,700px));min-height:0;padding:0 var(--gutter);overflow:clip; }
html[data-theme=light] .join { background:#f8e3d0; }
.join-layout { position:sticky;top:0;height:100svh;min-height:760px;display:grid;grid-template-columns:minmax(0,748fr) minmax(0,492fr);gap:0;margin:0; }
.join-copy { position:relative;inset:auto;width:100%;max-width:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:110px 48px 80px 0;z-index:2; }
.join-copy > .section-top { position:relative;top:auto;margin-bottom:32px; }
.join-copy h2 { font-size:clamp(44px,4.444vw,76px);line-height:1.07;letter-spacing:-.04em;max-width:748px; }
.join-copy .join-fit { display:block;font-size:24px;line-height:1.3;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:32px; }
.join-copy > p:not(.join-fit) { font-size:16px;line-height:1.3;color:var(--muted);max-width:384px;margin-top:24px; }
.join-copy > .button { margin-top:48px;min-width:301px; }
.join-media { position:relative;height:100%;min-width:0;min-height:0; }
.join-gallery { position:relative;inset:auto;display:block;width:100%;height:100%;min-height:0;overflow:clip;pointer-events:none;margin:0;padding:0;perspective:none;clip-path:inset(0); }
.join-track { position:relative;display:grid;gap:22px;width:100%;transform:translate3d(0,var(--join-y,65px),0);will-change:transform; }
.join-photo,.join-photo:nth-child(2n) { position:relative;inset:auto;grid-column:auto;width:100%;max-width:none;aspect-ratio:492/377;margin:0;opacity:1;transform:perspective(1300px) translate3d(0,var(--join-lift,0px),var(--join-z,0px)) rotateX(var(--join-pitch,0deg)) scale(var(--join-scale,1));transform-origin:center;will-change:transform;backface-visibility:hidden; }
.join-photo .image-frame { width:100%;height:100%;aspect-ratio:auto;border-radius:16px;overflow:hidden;transform:none!important;opacity:1!important;box-shadow:none; }
.join-photo img { object-position:center;filter:brightness(var(--join-light,1)) saturate(var(--join-saturation,1)); }

@media(max-width:1100px) and (min-width:901px) {
  .hero-buttons { gap:16px; }
  .hero .button.gradient { min-width:245px; }
  .hero-buttons .text-link { min-width:0; }
  .join-copy { padding-right:32px; }
  .join-copy h2 { font-size:48px; }
}
@media(max-width:900px) {
  .hero { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-height:100svh;height:auto;padding:120px var(--gutter) 90px; }
  .hero-content { position:relative;inset:auto;transform:none;width:min(100%,620px);max-width:none;padding:0;margin:0 auto; }
  .hero h1 { font-size:clamp(48px,8.4vw,68px); }
  .hero-eyebrow { margin-bottom:20px; }
  .hero-lower { margin-top:24px; }
  .hero-lower > p { max-width:480px; }
  .hero-buttons { margin-top:22px;gap:18px; }
  .planet-installation { position:relative;inset:auto;transform:none;width:min(78vw,440px,calc(100svh - 520px));min-width:230px;margin:0 auto; }
  .planet-hint { font-size:10px; }
  .hero-bottom,.scroll-cue { height:58px;min-height:58px; }
  .thea-stage { display:flex;flex-direction:column;gap:20px; }
  .thea-heading { position:relative;inset:auto;order:0;width:100%;max-width:560px;align-self:start;display:flex;padding:0; }
  .thea-heading > p { max-width:440px;font-size:14px; }
  .thea-heading .text-link { font-size:13px; }
  .thea-devices { order:1;padding-inline:24px;row-gap:0; }
  .thea-tablet-slot { grid-column:1 / span 16; }
  .thea-tablet-slot:nth-child(2) { grid-column:3 / span 16; }
  .thea-tablet-slot:nth-child(3) { grid-column:5 / span 16; }
  .testimonial-layout { grid-template-columns:1fr;gap:30px; }
  .group-intro { grid-template-columns:1.3fr 1fr;gap:32px; }
  .group-intro > div > p { font-size:14px;line-height:1.8; }
  .join-copy h2 { font-size:42px; }
  .join-copy { padding-right:28px; }
  .join-copy > .button { min-width:250px;font-size:14px; }
}
@media(max-width:760px) {
  .group-intro { grid-template-columns:1fr;gap:28px; }
  .group-intro > div { max-width:560px; }
  .join { height:auto!important;padding:70px var(--gutter); }
  .join-layout { position:relative;top:auto;height:auto;min-height:0;display:block; }
  .join-copy { display:block;width:100%;max-width:620px;padding:0; }
  .join-copy h2 { font-size:clamp(38px,6.4vw,52px);max-width:620px; }
  .join-copy .join-fit { font-size:23px;margin-top:28px; }
  .join-copy > .button { margin-top:32px; }
  .join-media { --join-gallery-height:clamp(360px,calc(100svh - 110px),620px);height:calc(var(--join-gallery-height) + var(--join-travel,1800px));margin-top:40px; }
  .join-gallery { position:sticky;top:90px;height:var(--join-gallery-height);overflow:clip;clip-path:inset(0); }
  .join-track { gap:22px;justify-items:center; }
  .join-photo,.join-photo:nth-child(2n) { width:min(78vw,490px);aspect-ratio:492/377; }
}
@media(max-width:600px) {
  .cosmic-trail .journey-svg { width:160%;margin-left:-15%; }
  .hero { gap:20px;padding:108px 28px 84px;min-height:100svh; }
  .hero-content { width:100%;max-width:440px; }
  .hero h1 { font-size:clamp(44px,12vw,62px); }
  .hero-eyebrow { font-size:11px;margin-bottom:18px; }
  .hero-lower { margin-top:22px; }
  .hero-lower > p { font-size:13px;line-height:1.65;max-width:360px; }
  .hero-buttons { gap:14px;margin-top:20px; }
  .hero .button.gradient { min-width:215px;min-height:46px;padding-inline:20px;font-size:12px; }
  .hero-buttons .text-link { min-width:0;min-height:46px;font-size:12px;gap:9px; }
  .planet-installation { width:min(84vw,380px,calc(100svh - 490px));min-width:235px;margin:0 auto; }
  .planet-controls { grid-template-columns:42px 1fr 42px;gap:8px; }
  .planet-mode { font-size:10px;min-height:28px; }
  .planet-hint { font-size:8px;margin-top:8px; }
  .hero-bottom,.scroll-cue { height:54px;min-height:54px; }
  .thea-stage { gap:16px;padding:0; }
  .thea-devices { width:100%;padding:50px 22px 190px;row-gap:0;flex:none; }
  .thea-heading .eyebrow { font-size:10px; }
  .thea-tablet-slot { width:100%;max-width:none; }
  .work-card .work-visual { border-radius:20px;clip-path:inset(0 round 20px); }
  .testimonials .clutch-card { min-height:205px;padding:30px 18px;gap:22px; }
  .clutch-word { font-size:64px; }
  .clutch-link { font-size:20px; }
}
@media(max-width:600px) and (max-height:760px) {
  .hero { padding-top:96px;padding-bottom:76px;gap:14px; }
  .hero h1 { font-size:clamp(40px,11.5vw,48px); }
  .hero-lower { margin-top:16px; }
  .hero-lower > p { font-size:12px;line-height:1.6; }
  .hero-buttons { margin-top:16px; }
  .planet-installation { width:min(76vw,280px,calc(100svh - 445px));min-width:210px; }
}
@media(max-width:400px) {
  .hero { padding:100px 28px 78px;gap:18px; }
  .hero-buttons { gap:12px; }
  .hero .button.gradient { min-width:200px;padding-inline:16px;font-size:11px;gap:12px; }
  .hero-buttons .text-link { font-size:11px;gap:8px; }
  .planet-installation { width:min(82vw,calc(100svh - 555px));min-width:210px; }
}
@media(max-width:370px) {
  .hero .button.gradient { min-width:180px;font-size:10px;padding-inline:12px; }
  .hero-buttons .text-link { font-size:10px;gap:7px; }
}
@media(prefers-reduced-motion:reduce) {
  .office-gallery-slide .image-frame img,.js .office-gallery-slide .image-frame img { transform:none!important;transition:none; }
  .thea-tablet,.js .thea-tablet-slot:not(.is-float-visible) .thea-tablet { transform:rotateX(var(--device-rx)) rotateY(var(--device-ry)) rotateZ(var(--device-rz))!important;transition:none; }
  .join { height:auto!important;padding:80px var(--gutter); }
  .join-layout { position:relative;height:auto;min-height:0; }
  .join-media { height:auto;margin-top:40px; }
  .join-gallery { position:relative;top:auto;height:auto;overflow:visible;clip-path:none; }
  .join-track { transform:none!important; }
  .join-photo { transform:none!important; }
  .join-photo img { filter:none; }
  .cosmic-trail path { stroke-dashoffset:0!important; }
  .cosmic-trail #journey-spark { display:none; }
}