/* light section: manifesto + intro (refs/flavio/analysis.md §3.2–3.3) */
.light { position: relative; z-index: 60; background: #f1f1f1; color: #111112; font-family: var(--inter); padding: 140px 0 150px; }

/* manifesto: indented first line after a quote mark, words light up with scroll */
.manifesto { position: relative; padding: 0 var(--mx); }
.mf-label { position: absolute; left: var(--mx); top: 6px; margin: 0; font-size: 13px; line-height: 1.35; color: #777; letter-spacing: -0.01em; }
.mf-label b { color: #111112; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; }
.mf-text { margin: 0; font-size: 80px; font-weight: 500; line-height: 1; letter-spacing: -0.045em; text-indent: 440px; }
.mf-quote { display: inline-block; text-indent: 0; width: 0; position: relative; left: -64px; top: -14px; font-size: 64px; color: #c9c9c9; font-family: Georgia, serif; }
.mf-text .w { color: #d9d9d9; transition: color .2s linear; }

/* intro: paragraph + rating above a wide photo, card and CTA on the right */
.intro3 {
  max-width: 1126px; margin: 220px auto 0; padding: 0 var(--mx);
  display: grid; grid-template-columns: 280px 71px 313px 130px 332px; box-sizing: content-box;
}
.i-col1 { grid-column: 1 / 4; grid-row: 1; display: grid; grid-template-columns: 280px 71px 313px; grid-template-rows: 170px auto; }
.i-text { grid-column: 1; margin: 0; font-size: 20px; line-height: 1.4; color: #777; letter-spacing: -0.02em; }
.i-photo { grid-column: 1 / 4; width: 664px; height: 535px; object-fit: cover; border-radius: 16px; margin-top: 64px; display: block; }
.i-col2 { grid-column: 3; grid-row: 1; align-self: start; }
.i-rating { display: flex; align-items: center; gap: 12px; }
.i-rating img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.i-rating p { margin: 0; font-size: 13px; color: #777; }
.i-rating b { color: #111112; font-weight: 600; }
.i-rating span { color: #111112; letter-spacing: 1px; margin-left: 6px; }
.i-quote { margin: 14px 0 10px 58px; font-size: 15px; line-height: 1.45; color: #777; max-width: 22ch; }
.i-name { margin: 0 0 0 58px; font-size: 13px; font-weight: 500; }
.i-col3 { grid-column: 5; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; }

.i-card { background: #fff; border-radius: 16px; padding: 10px; transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring); }
.i-card:hover { transform: translateY(-9px) scale(1.015); box-shadow: 0 18px 40px rgba(17, 17, 18, .1); }
.i-card-media { position: relative; height: 380px; }
.i-card-media > img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; filter: grayscale(1); display: block; }
.i-pill {
  position: absolute; left: 10px; top: 10px; margin: 0; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
}
.i-pill img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.i-pill i { position: absolute; left: 21px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #3ccf5a; box-shadow: 0 0 0 1.5px #fff; }
.i-card-body { position: relative; padding: 26px 64px 30px 14px; }
.i-card-title { margin: 0 0 10px; font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.04em; }
.i-card-text { margin: 0; font-size: 14px; line-height: 1.45; color: #777; }
.i-round {
  position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%;
  background: #111112; color: #fff; display: grid; place-items: center; text-decoration: none; font-size: 15px;
}

/* underlined CTA: text moves right, line grows, arrow turns from ↗ to → */
.u-cta {
  align-self: start; display: inline-flex; align-items: center; justify-content: space-between; gap: 60px;
  font-size: 20px; font-weight: 500; letter-spacing: -0.03em; color: inherit; text-decoration: none;
  padding-bottom: 10px; position: relative;
}
.u-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transition: right .25s var(--ease-spring); }
.u-cta, .u-cta b { transition: transform .25s var(--ease-spring); }
.u-cta b { font-weight: 500; display: inline-block; transition-delay: .04s; }
.u-cta:hover { transform: translateX(12px); }
.u-cta:hover::after { right: -16px; }
.u-cta:hover b { transform: rotate(45deg); }

@media (max-width: 1200px) {
  .intro3 { grid-template-columns: 1fr 24px 1fr; max-width: none; }
  .i-col1 { grid-column: 1 / 4; grid-template-columns: 1fr 24px 1fr; }
  .i-photo { width: 100%; height: auto; aspect-ratio: 664 / 535; }
  .i-col3 { grid-column: 1 / 4; grid-row: 2; margin-top: 40px; max-width: 360px; gap: 40px; }
  .mf-text { font-size: 7vw; text-indent: 30%; }
}
@media (max-width: 600px) {
  .light { padding: 90px 0 100px; }
  .mf-label { position: static; margin-bottom: 24px; }
  .mf-text { font-size: 10.5vw; text-indent: 0; }
  .mf-quote { display: none; }
  .intro3 { margin-top: 90px; }
  .i-col1 { grid-template-columns: 1fr; }
  .i-col2 { grid-column: 1; grid-row: 2; margin-top: 32px; }
  .i-photo { grid-column: 1; }
}

/* services: dark photo, title left, 2×3 grid in columns 3 and 4 (refs/flavio/analysis.md §3.4) */
.services { position: relative; z-index: 60; background: var(--hd); color: #fff; font-family: var(--inter); padding: 236px var(--mx) 150px; overflow: hidden; }
.sv-bg { position: absolute; inset: 0; }
.sv-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.sv-bg::after { content: ""; position: absolute; inset: 0; background: rgba(17, 17, 18, .72); }
.services > .guides, .services > .corners { z-index: 1; }
.sv-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; }
.sv-title { margin: 0 0 30px; font-size: 76px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.sv-text { margin: 0 0 48px; max-width: 18em; font-size: 20px; line-height: 1.4; color: var(--white-60); letter-spacing: -0.02em; }
.services .u-cta { color: #fff; }
.sv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
.sv-grid li { position: relative; padding: 0 28px 64px 30px; }
.sv-grid img { width: 58px; height: 58px; border-radius: 8px; object-fit: cover; display: block; margin-bottom: 30px; }
.s-num { position: absolute; right: 28px; top: 0; font-size: 14px; color: var(--white-60); font-variant-numeric: tabular-nums; }
.sv-grid h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; }
.sv-grid p { margin: 0; max-width: 17em; font-size: 14px; line-height: 1.45; color: var(--white-60); }

/* portfolio: section line, big title, 2 columns of cards that play on hover */
.portfolio { padding: 130px var(--mx) 120px; }
.sec-line { display: flex; justify-content: space-between; border-top: 2px solid #111112; padding-top: 12px; font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.pf-head { display: grid; grid-template-columns: 714px 356px 1fr; margin: 116px 0 104px; align-items: start; }
.pf-title { margin: 0; font-size: 82px; font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.pf-text { margin: 4px 0 0; max-width: 13.5em; font-size: 20px; line-height: 1.4; color: #777; letter-spacing: -0.02em; }
.pf-qa { margin: 4px 0 0; max-width: 17em; font-size: 13px; line-height: 1.45; color: #8a8a8a; }
.pf-qa b { color: #111112; font-weight: 500; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; row-gap: 74px; }
.p-media { position: relative; display: block; width: 100%; aspect-ratio: 654 / 464; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #ddd; cursor: none; }
.p-media img, .p-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-media video { opacity: 0; transition: opacity .3s linear; }
.p-media.playing video { opacity: 1; }
.p-media .corners i { border-color: rgba(255, 255, 255, .9); }
.p-media .corners i:nth-child(1) { top: 20px; left: 20px; } .p-media .corners i:nth-child(2) { top: 20px; right: 20px; }
.p-media .corners i:nth-child(3) { bottom: 20px; left: 20px; } .p-media .corners i:nth-child(4) { bottom: 20px; right: 20px; }
.p-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 26px; }
.p-meta h3 { margin: 0; font-size: 40px; font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; }
.p-client { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.04em; color: #b0b0b0; }
.p-cat { margin: 6px 0 0; font-size: 13px; color: #777; }

@media (max-width: 1200px) {
  .sv-inner, .pf-head { grid-template-columns: 1fr; gap: 40px; }
  .sv-grid { margin-top: 20px; }
  .pf-title { font-size: 9vw; }
}
@media (max-width: 700px) {
  .services { padding: 120px var(--mx) 80px; }
  .sv-title { font-size: 48px; }
  .sv-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .sv-grid li { padding: 0 0 40px; display: grid; grid-template-columns: 58px 1fr; column-gap: 16px; }
  .sv-grid img { grid-row: span 2; margin: 0; }
  .s-num { right: 0; }
  .pf-grid { grid-template-columns: 1fr; }
  .p-meta h3 { font-size: 28px; } .p-client { font-size: 18px; }
}

/* bento (refs/flavio/analysis.md §3.6): 674+674, then 443/442/211/211, gap 20 */
.bento { padding: 150px var(--mx) 0; }
.bt-head { text-align: center; margin-bottom: 120px; }
.bt-title { margin: 0 0 30px; font-size: 92px; font-weight: 500; line-height: 1; letter-spacing: -0.055em; color: #3a3a3b; }
.bt-sub { margin: 0 auto; max-width: 26em; font-size: 20px; line-height: 1.4; color: #777; letter-spacing: -0.02em; }
.bt-card { position: relative; overflow: hidden; border-radius: 24px; background: #fff; color: #111112; text-decoration: none; }
.bt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-row1 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bt-row1 .bt-card { height: 474px; }
.bt-row2 {
  display: grid; gap: 20px; margin-top: 20px;
  grid-template-columns: 443fr 442fr 211fr 211fr; grid-template-rows: 228px 228px 264px 226px;
  grid-template-areas: "insta view k4 golden" "insta view chat chat" "insta fpv chat chat" "clients fpv delivery delivery";
}
.bt-insta { grid-area: insta; } .bt-view { grid-area: view; } .bt-4k { grid-area: k4; } .bt-golden { grid-area: golden; }
.bt-chat { grid-area: chat; } .bt-fpv { grid-area: fpv; } .bt-clients { grid-area: clients; } .bt-delivery { grid-area: delivery; }

.bt-product::after, .bt-collage::after, .bt-insta::after, .bt-delivery::after, .bt-view::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 11, .85), rgba(10, 10, 11, 0) 60%); pointer-events: none;
}
.bt-product-body { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 1; color: #fff; }
.bt-brand { margin: 0 0 10px; font-size: 30px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.bt-big { margin: 0 0 6px; font-size: 64px; font-weight: 400; letter-spacing: -0.05em; line-height: 1; }
.bt-line { margin: 0 0 22px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.light-cta { color: #fff; font-size: 16px; gap: 40px; }

.bt-tiles { position: absolute; inset: 0; overflow: hidden; }
.bt-tiles-track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 160px); gap: 1px; width: max-content; animation: tiles 60s linear infinite; }
.bt-tiles img { width: 136px; height: 160px; object-fit: cover; display: block; }
@keyframes tiles { to { transform: translateX(-50%); } }
.bt-collage-text { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 1; margin: 0; color: #fff; font-size: 22px; line-height: 1.3; letter-spacing: -0.03em; }

.bt-ig { position: absolute; right: 22px; top: 22px; z-index: 1; }
.bt-insta-link { position: absolute; left: 26px; bottom: 26px; z-index: 1; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; display: flex; gap: 40px; }
.bt-insta-link b { font-weight: 500; transition: transform .25s var(--ease-spring); }
.bt-insta:hover .bt-insta-link b { transform: rotate(45deg); }
.bt-insta .bt-cover { transition: transform .8s var(--ease-spring); }
.bt-insta:hover .bt-cover { transform: scale(1.03); }

.bt-clients { display: flex; align-items: center; gap: 14px; padding: 0 24px; }
.bt-num { margin: 0; font-size: 60px; font-weight: 500; letter-spacing: -0.06em; line-height: 1; }
.bt-num sup { font-size: .45em; vertical-align: top; position: relative; top: -2px; }
.bt-small { margin: 0; font-size: 12px; line-height: 1.35; color: #777; }
.bt-avatars { display: flex; margin-left: auto; }
.bt-avatars img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-left: -14px; }

.bt-finder i { position: absolute; z-index: 1; width: 26px; height: 26px; border: 0 solid #fff; }
.bt-finder i:nth-child(1) { left: calc(50% - 70px); top: calc(36% - 40px); border-width: 4px 0 0 4px; border-top-left-radius: 8px; }
.bt-finder i:nth-child(2) { left: calc(50% + 44px); top: calc(36% - 40px); border-width: 4px 4px 0 0; border-top-right-radius: 8px; }
.bt-finder i:nth-child(3) { left: calc(50% - 70px); top: calc(36% + 14px); border-width: 0 0 4px 4px; border-bottom-left-radius: 8px; }
.bt-finder i:nth-child(4) { left: calc(50% + 44px); top: calc(36% + 14px); border-width: 0 4px 4px 0; border-bottom-right-radius: 8px; }
.bt-finder { animation: finder 2.4s ease-in-out infinite; position: absolute; inset: 0; transform-origin: 50% 36%; }
@keyframes finder { 50% { transform: scale(.94); } }
.bt-view-text { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 1; margin: 0; text-align: center; color: #fff; font-size: 20px; line-height: 1.3; letter-spacing: -0.03em; }

.bt-fpv { background: #111112; }
.bt-fpv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-fpv-label { position: absolute; left: 22px; top: 18px; margin: 0; color: #fff; font-size: 12px; z-index: 1; }

.bt-4k { background: #e6e6e6; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.bt-golden { background: #1b1b1c; color: #fff; padding: 22px 20px; display: flex; flex-direction: column; justify-content: space-between; }
.bt-golden .bt-small { color: rgba(255, 255, 255, .6); }
.bt-golden-time { margin: 4px 0 0; font-size: 22px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; color: var(--gold); }

.bt-chat { padding: 30px 26px; display: flex; flex-direction: column; }
.bt-chat-day { margin: 0 0 22px; text-align: center; font-size: 12px; color: #aaa; }
.bt-msgs { display: flex; flex-direction: column; gap: 10px; }
.m { margin: 0; max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; }
.m.in { align-self: flex-start; background: #efefef; border-bottom-left-radius: 6px; }
.m.out { align-self: flex-end; background: #111112; color: #fff; border-bottom-right-radius: 6px; }
.m.typing { align-self: flex-start; background: #efefef; display: flex; gap: 4px; padding: 14px 16px; }
.m.typing i { width: 6px; height: 6px; border-radius: 50%; background: #999; animation: dot 1s infinite; }
.m.typing i:nth-child(2) { animation-delay: .15s; } .m.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: .3; transform: translateY(-2px); } }
.bt-msgs { flex: 1; justify-content: flex-end; }
.bt-chat .m { animation: msg .45s var(--ease-spring) both; transform-origin: left bottom; }
.bt-chat .m.out { transform-origin: right bottom; }
.bt-chat .m.typing.out { align-self: flex-end; }
.bt-msgs.clear .m { transition: opacity .4s linear; opacity: 0; }
@keyframes msg { from { opacity: 0; transform: translateY(12px) scale(.94); } }

/* precision card: a camera mode dial turning slowly */
.bt-golden { justify-content: flex-start; }
.bt-dial { position: absolute; left: 50%; bottom: -118px; width: 200px; height: 200px; margin-left: -100px; animation: dial 24s linear infinite; }
.bt-dial circle { fill: #232324; stroke: #3a3a3b; stroke-width: 1; }
.bt-dial circle.in { fill: #1b1b1c; }
.bt-dial .tk line { stroke: #8a8a8a; stroke-width: 1; }
.bt-dial .lb text { fill: #d8d8d8; font: 600 13px var(--inter); text-anchor: middle; }
@keyframes dial { to { transform: rotate(-360deg); } }

.bt-insta { background: #111112; }
.bt-clock { display: block; margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .bt-tiles-track, .bt-finder, .bt-dial { animation: none; } }

.bt-delivery-text { position: absolute; left: 26px; bottom: 24px; z-index: 1; margin: 0; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.4; }
.bt-delivery-text b { color: #fff; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }

@media (max-width: 1100px) {
  .bt-title { font-size: 9vw; }
  .bt-row1 { grid-template-columns: 1fr; }
  .bt-row2 { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 260px;
    grid-template-areas: "insta view" "insta fpv" "k4 golden" "chat chat" "chat chat" "clients clients" "delivery delivery"; }
}
@media (max-width: 600px) {
  .bt-row1 .bt-card { height: 400px; }
  .bt-row2 { grid-template-columns: 1fr; grid-template-areas: "insta" "insta" "view" "fpv" "k4" "golden" "chat" "chat" "clients" "delivery"; }
  .bt-big { font-size: 44px; } .bt-brand { font-size: 20px; }
}

/* testimonials: white, intro + arrows left, big quote right (refs/flavio/analysis.md §3.9) */
.testimonials { position: relative; z-index: 60; background: #fff; color: #111112; font-family: var(--inter); padding: 86px var(--mx) 70px; display: grid; grid-template-columns: 464px 1fr; min-height: 720px; box-sizing: border-box; }
.ts-left { display: flex; flex-direction: column; justify-content: space-between; }
.ts-intro { margin: 0; max-width: 17em; font-size: 21px; font-weight: 400; line-height: 1.4; color: #777; letter-spacing: -0.02em; }
.ts-arrows { display: flex; gap: 12px; }
.ts-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; background: #ececec; font-size: 18px; cursor: pointer; transition: background .2s, transform .2s var(--ease-spring); }
.ts-btn:hover { background: #e0e0e0; } .ts-btn:active { transform: scale(.94); }
.ts-slides { position: relative; display: grid; }
.ts-slide { margin: 0; position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s linear, visibility .5s; display: flex; flex-direction: column; }
.ts-slide.on { position: relative; opacity: 1; visibility: visible; height: 100%; }
.ts-quote { margin: 0 0 40px 120px; font-size: 80px; font-weight: 500; line-height: 1; letter-spacing: -0.045em; position: relative; }
.ts-mark { position: absolute; left: -122px; top: -6px; font-family: var(--inter); font-weight: 700; font-size: 170px; line-height: 1; color: #d9d9d9; letter-spacing: -0.12em; }
.ts-body { margin: 0 0 auto 120px; max-width: 30em; font-size: 20px; line-height: 1.4; color: #777; letter-spacing: -0.02em; }
.ts-slide .i-rating { margin: 50px 0 0 120px; }
.ts-slide .i-rating small { font-size: 12px; color: #999; }

/* about: full-bleed photo, big white text from column 2, paragraph in column 3 */
.about2 { position: relative; z-index: 60; min-height: 1000px; color: #fff; font-family: var(--inter); overflow: hidden; padding: 96px var(--mx) 90px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr; box-sizing: border-box; }
.ab-bg { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; object-position: 50% 50%; will-change: transform; }
.about2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 10, 11, .62), rgba(10, 10, 11, .22) 48%, rgba(10, 10, 11, .6)); z-index: 1; }
.about2 > .ab-bg { z-index: 0; }
.about2 > .guides, .about2 > .corners { z-index: 1; }
.ab-title { grid-column: 2 / 5; position: relative; z-index: 2; margin: 0; font-size: 84px; font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.ab-title .w { color: rgba(255, 255, 255, .35); }
.ab-side { grid-column: 3; grid-row: 2; align-self: end; position: relative; z-index: 2; }
.ab-side p { margin: 0 0 34px; max-width: 21em; font-size: 16px; line-height: 1.45; }
.about2 .u-cta { color: #fff; }

/* FAQ: section line, profile on the left, title and accordion on the right */
.faq { padding: 130px var(--mx) 140px; }
.fq-grid { display: grid; grid-template-columns: 469px 1fr; margin-top: 140px; }
.fq-profile { display: flex; gap: 18px; align-items: center; margin-bottom: 64px; }
.fq-profile img { width: 70px; height: 70px; border-radius: 10px; object-fit: cover; }
.fq-profile p { margin: 0; font-size: 13px; color: #777; line-height: 1.35; }
.fq-profile b { color: #111112; font-size: 17px; font-weight: 500; }
.fq-q { margin: 0 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.fq-a { margin: 0 0 32px; max-width: 17em; font-size: 20px; line-height: 1.4; color: #777; letter-spacing: -0.02em; }
.fq-title { margin: 0 0 70px; font-size: 80px; font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.fq-item { border-bottom: 1px solid #d5d5d5; }
.fq-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 34px 0; background: none; border: 0; text-align: left; font: 600 20px var(--inter); letter-spacing: -0.03em; color: #111112; cursor: pointer; }
.fq-plus { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease-spring); }
.fq-plus::before, .fq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: #111112; }
.fq-plus::after { transform: rotate(90deg); }
.fq-item.open .fq-plus { transform: rotate(45deg); }
.fq-ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-spring); }
.fq-ans > p { overflow: hidden; margin: 0; max-width: 62em; font-size: 15px; line-height: 1.5; color: #777; }
.fq-item.open .fq-ans { grid-template-rows: 1fr; }
.fq-item.open .fq-ans > p { padding-bottom: 32px; margin-top: -12px; }
.fq-btn:hover { color: #555; }

@media (max-width: 1100px) {
  .testimonials, .fq-grid { grid-template-columns: 1fr; gap: 40px; }
  .ts-left { gap: 30px; }
  .ts-quote { font-size: 7vw; margin-left: 0; } .ts-mark { display: none; }
  .ts-body, .ts-slide .i-rating { margin-left: 0; }
  .about2 { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; min-height: 760px; }
  .ab-title { font-size: 9vw; } .ab-side { align-self: auto; }
  .fq-title { font-size: 12vw; }
}

/* footer = contact (refs/flavio/analysis.md §3.12): dark photo, 4 columns, name at the foot */
.ruler-ft { position: absolute; left: 0; right: 0; top: 8px; z-index: 2; background: transparent; color: rgba(255, 255, 255, .3); --tick: rgba(255, 255, 255, .2); }
.ft { position: relative; z-index: 60; min-height: 1000px; color: #fff; font-family: var(--inter); overflow: hidden; padding: 120px var(--mx) 64px; box-sizing: border-box; display: flex; }
.ft-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); }
.ft::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(17, 17, 18, .74); }
.ft > .guides, .ft > .corners { z-index: 2; }
.ft-grid { position: relative; z-index: 3; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr auto; }
.ft-c1 { grid-column: 1; }
.ft-c2 { grid-column: 2 / 4; }
.ft-nav { grid-column: 4; display: flex; flex-direction: column; gap: 8px; }
.ft-small { margin: 0 0 18px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .6); }
.ft-lead { margin: 0; max-width: 11em; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.03em; }
.ft-caps { margin: 0 0 24px; font-size: 15px; text-transform: uppercase; color: rgba(255, 255, 255, .6); letter-spacing: -0.01em; }
.ft-label { margin: 0 0 8px; font-size: 18px; }
.ft-mail { display: inline-block; font-size: 40px; letter-spacing: -0.04em; color: #fff; text-decoration: none; padding-bottom: 8px; border-bottom: 2px solid #fff; transition: opacity .25s; }
.ft-mail:hover { opacity: .75; }
.ft-who { margin-top: 30px; color: rgba(255, 255, 255, .6); font-size: 13px; }
.ft-who span { color: #fff; }
.ft-nav a { font-size: 30px; letter-spacing: -0.04em; color: rgba(255, 255, 255, .7); text-decoration: none; line-height: 1.25; transition: color .4s cubic-bezier(.44, 0, .56, 1); }
.ft-nav a:hover { color: #fff; }
.ft-wm { grid-column: 1 / 3; grid-row: 3; align-self: end; font-size: min(5.6vw, 108px); color: rgba(255, 255, 255, .9); animation: none !important; justify-self: start; }
.ft-wm .wm-bowl { border-color: rgba(255, 255, 255, .9); } .ft-wm .wm-stem { background: rgba(255, 255, 255, .9); }
.ft-social { grid-column: 4; grid-row: 3; align-self: end; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ft-social a { color: #fff; text-decoration: none; align-self: flex-start; }
.ft-social p { margin: 4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .5); }

@media (max-width: 900px) {
  .ft { min-height: 0; padding-top: 100px; }
  .ft-grid { grid-template-columns: 1fr; gap: 40px; grid-template-rows: none; }
  .ft-c1, .ft-c2, .ft-nav, .ft-wm, .ft-social { grid-column: 1; grid-row: auto; }
  .ft-mail { font-size: 7vw; }
  .ft-wm { font-size: 11vw; }
}
.initials { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #e4e4e4; color: #111112; display: grid; place-items: center; font: 600 14px var(--inter); letter-spacing: -0.02em; }

/* menu: a black panel that drops from the top, big links */
.menu { position: fixed; inset: 0; z-index: 90; background: #111112; color: #fff; font-family: var(--inter); padding: 40px var(--mx); display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 500; }
.menu-close { background: none; border: 0; color: #fff; font: 500 15px var(--inter); text-transform: uppercase; cursor: pointer; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { color: #fff; text-decoration: none; font-size: clamp(56px, 11vw, 150px); font-weight: 700; letter-spacing: -0.06em; line-height: .95; text-transform: uppercase; transition: opacity .2s; }
.menu-links a:nth-child(even) { align-self: flex-end; }
.menu-links:hover a { opacity: .35; } .menu-links a:hover { opacity: 1; }
.menu-foot { display: flex; flex-wrap: wrap; gap: 14px 32px; font-size: 16px; align-items: center; }
.menu-foot a { color: #fff; text-decoration: none; }
.menu-foot p { margin: 0 0 0 auto; color: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: no-preference) {
  .menu.open { animation: menuDrop .5s var(--ease-spring) both; }
  .menu.open .menu-links a { animation: menuIn .5s .15s var(--ease-spring) both; }
  @keyframes menuDrop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }
}
.p-media .p-vimeo { position: absolute; inset: 0; opacity: 0; transition: opacity .4s linear; pointer-events: none; overflow: hidden; }
.p-media .p-vimeo iframe { position: absolute; left: 50%; top: 50%; width: 178%; height: 100%; transform: translate(-50%, -50%); border: 0; }
.p-media.playing .p-vimeo { opacity: 1; }