/* Boceto 8: all Boceto 9 refinements, retaining the original Earth and videos. */
.hero-line--rotating { padding-bottom:.18em;margin-bottom:0; }
html[data-theme=light] .hero-line--rotating { color:#EE5F16; }
.hero-buttons { --hero-action-size:16px; }
.hero-buttons .text-link { font-size:var(--hero-action-size)!important; }
.hero,.hero-bottom,.hero .hero-lower,.hero .hero-content { transition:none; }
.planet-controls { margin:-23px auto 0; }
.planet-orbit { position:relative;display:flex;justify-content:center;align-items:flex-end;gap:12px;height:42px;padding:0;min-width:0;border:1px solid #ff9b4d40;border-radius:50%;background:transparent;cursor:ew-resize;touch-action:pan-y; }
.planet-orbit:after { display:none; }
.planet-orbit .orbit-thumb { position:relative;top:auto;left:auto;width:24px;height:24px;transform:none;margin:0 0 -7px;border-radius:50%;background:#fff9ed;box-shadow:0 0 0 5px #ff934522,0 0 15px #ffa24252; }
.planet-orbit .orbit-thumb > span { position:static;inset:auto;width:9px;height:9px;border:0;border-radius:50%;background:#ff7924; }
.planet-orbit .orbit-left,.planet-orbit .orbit-right { position:relative;top:auto;left:auto;right:auto;transform:none;font-size:27px;line-height:26px;color:#ff7924;margin:0 0 -5px; }
.planet-hint { width:max-content;max-width:calc(100vw - 48px);position:relative;left:50%;transform:translateX(-50%);font-size:14px;line-height:1.5;letter-spacing:.035em; }
html[data-case-studies=disabled] .work-grid .work-visual,
html[data-case-studies=disabled] .work-grid .work-meta a { cursor:default; }
html[data-case-studies=disabled] .work-grid .project-cursor,
html[data-case-studies=disabled] .case-next { display:none!important; }
@media(max-width:1100px){.hero-buttons{--hero-action-size:14px}}
@media(max-width:760px){
  .join { padding-bottom:0; }
  .join-media { --join-gallery-height:clamp(320px,48dvh,410px);height:calc(100svh + 240px);margin-top:20px; }
  .join-viewport-stage { position:sticky;top:max(94px,calc(50dvh - var(--join-gallery-height)/2));height:var(--join-gallery-height);width:calc(100% + var(--gutter)*2);margin-inline:calc(var(--gutter)*-1); }
  .join-gallery { display:block;position:relative;inset:auto;height:100%;width:100%;overflow-x:auto;overflow-y:hidden;clip-path:none;pointer-events:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-overflow-scrolling:touch; }
  .join-gallery::-webkit-scrollbar { display:none; }
  .join-gallery.is-dragging { scroll-snap-type:none;cursor:grabbing; }
  .join-track { display:flex;gap:22px;align-items:center;width:max-content;height:100%;padding-inline:var(--join-side,calc((100vw - min(78vw,490px))/2));position:relative;top:0;transform:none!important; }
  .join-photo,.join-photo:nth-child(2n) { flex:none;margin:0;scroll-snap-align:center;scroll-snap-stop:always;transform:perspective(1300px) rotateY(var(--join-yaw,0deg)) scale(var(--join-scale,1)); }
  .join-photo img { pointer-events:none;-webkit-user-drag:none; }
  .join-mobile-controls { display:flex;position:absolute;left:var(--gutter);right:var(--gutter);bottom:6px;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.02em; }
  .join-mobile-actions { display:flex;align-items:center;gap:12px; }
  .join-photo-count { min-width:44px;text-align:center; }
  .join-mobile-actions button { display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent; }
  .join-mobile-actions button:disabled { opacity:.3; }
  .join-mobile-actions button:not(:disabled):active { background:var(--gradient);color:white; }
  .join-mobile-actions svg { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5; }
}
.join-viewport-stage { height:100%; }
.join-mobile-controls { display:none; }
@media(max-width:760px){.join-viewport-stage{height:var(--join-gallery-height)}.join-mobile-controls{display:flex}}
@media(max-width:600px){
  .hero-buttons { --hero-action-size:12px; }
  .planet-controls { margin:-14px auto 0; }
  .planet-orbit { height:32px; }
  .planet-orbit .orbit-thumb { width:24px;height:24px; }
  .planet-orbit .orbit-thumb > span { inset:auto;border:0; }
  .planet-hint { font-size:12px;letter-spacing:.025em; }
}
@media(max-width:400px){.hero-buttons{--hero-action-size:11px}}
@media(max-width:370px){.hero-buttons{--hero-action-size:10px}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
  .join-media { height:auto;min-height:var(--join-gallery-height); }
  .join-viewport-stage { position:relative;top:auto; }
  .join-track { display:flex;width:max-content; }
  .join-photo,.join-photo:nth-child(2n) { transform:none!important; }
}

/* Refinement: shared section hierarchy and more readable secondary typography. */
.join-copy h2 { font-size:clamp(44px,5.556vw,96px);line-height:1.07; }
.footer-nav a { font-size:14px; }
.footer-bottom,.footer-bottom p { font-size:12px;line-height:1.7; }
.footer-bottom a { font-size:14px; }

/* The gradient fades as a layer, so its arrival and departure can ease smoothly. */
.testimonials .clutch-card { position:relative;isolation:isolate;overflow:hidden;transition:transform .85s cubic-bezier(.22,1,.36,1),border-color .65s ease,box-shadow .85s ease; }
.testimonials .clutch-card:before { content:'';position:absolute;inset:0;z-index:-1;background:var(--gradient);opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1); }
html[data-theme=dark] .testimonials .clutch-card:is(:hover,:focus-visible) { background:#17110d; }
html[data-theme=light] .testimonials .clutch-card:is(:hover,:focus-visible) { background:#ffefde; }
.testimonials .clutch-card:is(:hover,:focus-visible) { transform:translateY(-5px);box-shadow:0 18px 45px #ed5e1214; }
.testimonials .clutch-card:is(:hover,:focus-visible):before { opacity:1; }
.testimonials .clutch-card :is(.clutch-word,.clutch-link,.clutch-dot) { transition:color .6s ease,transform .85s cubic-bezier(.22,1,.36,1); }
.testimonials .clutch-card:is(:hover,:focus-visible) .clutch-word { transform:translateY(-2px); }

/* Three 22px strokes match the rendered weight of Figma's 26px sun/moon icons. */
.menu-toggle { position:relative;width:36px;height:40px;padding:0;flex:none; }
.menu-toggle span { position:absolute;left:7px;top:calc(50% - .925px);display:block;width:22px;height:1.85px;margin:0;border-radius:2px;transform-origin:center;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .25s ease; }
.menu-toggle span:nth-child(1) { transform:translateY(-7px); }
.menu-toggle span:nth-child(2) { transform:none; }
.menu-toggle span:nth-child(3) { transform:translateY(7px); }
.menu-open .menu-toggle span:nth-child(1) { transform:rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity:0;transform:scaleX(.35); }
.menu-open .menu-toggle span:nth-child(3) { transform:rotate(-45deg); }
@media(max-width:600px){.join-copy h2{font-size:46px;line-height:1.08}.footer-nav a{font-size:14px}.footer-bottom,.footer-bottom p{font-size:12px}.footer-bottom a{font-size:14px}}

/* Contact uses the same readable body scale as the rest of the landing. */
.contact-form { gap:24px; }
.contact-form label { display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 5px;font-size:14px;font-weight:500;line-height:1.6; }
.contact-form label>span,.contact-form .field-pair label:last-child>span,.contact-form>label>span { position:static;margin-left:0;justify-self:start;align-self:start; }
.contact-form input,.contact-form textarea { grid-column:1/-1;font-size:16px;line-height:1.6;padding:8px 0 14px; }
.contact-form textarea { min-height:160px; }
.contact-form .form-bottom { gap:20px; }
.contact-form .form-bottom p { min-width:0;font-size:14px;line-height:1.6; }
.contact-form .form-bottom .button { font-size:16px;min-width:120px;height:52px;min-height:52px;padding-inline:24px;flex:none; }
.contact-form #form-result,.contact-form #email-draft { font-size:16px;line-height:1.6; }
@media(max-width:480px){.contact-form .field-pair{grid-template-columns:1fr;gap:24px}.contact-form .form-bottom{display:grid;grid-template-columns:1fr;gap:18px}.contact-form .form-bottom .button{justify-self:end}}

/* VFG Group verticals: pure white hover in Light mode. */
html[data-theme=light] .group-row:is(:hover,:focus-visible,.is-previewing) { background-color:#ffffff; }