/* Digital Flow / Audiovisual V5 — authoritative brand: DF Social Brand Book 2026.09.21 */
/* IBM Plex Sans + IBM Plex Mono | Cream #F4F0E7 | Carbon #1D1D1B | Signal #F2FF24 */
/* Renan/VRC reference supplies cinematographic drafting concept, not any VRC branding. */
:root{--bg:#F4F0E7;--surface:#F2EEE6;--ink:#1D1D1B;--soft:#4d4c49;--muted:#64645f;--line:rgba(29,29,27,.15);--accent:#F2FF24;--accent2:#FF6A1A;--serif:"IBM Plex Sans",sans-serif;--sans:"IBM Plex Sans",system-ui,sans-serif;--display:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
body{font-family:var(--sans);background:var(--bg);color:var(--ink)}
::selection{background:#F2FF24;color:#1D1D1B}
h1,h2,h3,.brandtext strong{font-family:var(--sans);letter-spacing:-.045em}
h1 em,h2 em{color:var(--ink);font-family:var(--sans);font-style:normal;letter-spacing:inherit}
.review-banner{background:#e5e0d5;border-color:#d0cbbc;color:#363631;font-family:var(--mono);font-size:9px}
.review-banner strong{color:#42433b}
nav{background:#F4F0E7f4;border-color:#d8d2c7;backdrop-filter:blur(9px)}
.navbar{height:76px}
.brand{gap:11px}
.official-mark{width:36px;height:36px}
.brandtext strong{font-weight:700;letter-spacing:.035em;font-size:15px}
.brandtext span{font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:#6B6A63;font-weight:500}
.navlinks a{color:#40403b;font:600 12px var(--sans)}
.navlinks a:hover,.footer a:hover{color:#171716}
.lang{background:#eae5d8;border-color:#cac2b4}
.lang button{font-family:var(--mono);color:#55524e}
.lang button.active{background:var(--ink);color:#F4F0E7}
.kicker{color:#60604f;font:600 11px var(--mono);letter-spacing:.09em}
.kicker:before{background:#222}
.button{background:transparent;color:var(--ink);border-color:#9f9b90;border-radius:3px;font-weight:600;min-height:52px}
.button:hover{border-color:#1D1D1B;color:#1D1D1B}
.button.primary,.contact .button.primary,.custom-section .button.primary{background:var(--accent);color:#1D1D1B;border-color:var(--accent)}
.button.primary:hover,.contact .button.primary:hover,.custom-section .button.primary:hover{background:#ddea00;color:#1D1D1B;border-color:#ddea00}
.df-hero-v5{isolation:isolate;position:relative;overflow:hidden;background:#F4F0E7;color:#1D1D1B;border-bottom:1px solid #b8b2a6;padding:0}
.df-sheet-grid{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(29,29,27,.035) 1px,transparent 1px),linear-gradient(rgba(29,29,27,.035) 1px,transparent 1px),radial-gradient(circle,rgba(29,29,27,.19) 1.1px,transparent 1.4px);background-size:220px 220px,220px 220px,220px 220px;background-position:center top;opacity:.9}
.df-sheet-axis{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(29,29,27,.055) 50%,transparent calc(50% + .5px)),radial-gradient(ellipse 60% 70% at 70% 40%,rgba(255,255,255,.48),transparent 80%)}
.df-sheet-frame{position:absolute;inset:38px clamp(12px,2.4vw,44px) 34px;z-index:-1;border:1px solid rgba(29,29,27,.10);pointer-events:none}
.df-sheet-frame i{position:absolute;width:15px;height:15px;border-color:rgba(29,29,27,.45);border-style:solid}
.df-sheet-frame i:nth-child(1){left:-1px;top:-1px;border-width:1px 0 0 1px}
.df-sheet-frame i:nth-child(2){right:-1px;top:-1px;border-width:1px 1px 0 0}
.df-sheet-frame i:nth-child(3){right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.df-sheet-frame i:nth-child(4){left:-1px;bottom:-1px;border-width:0 0 1px 1px}
.df-hero-shell{position:relative;z-index:2}
.df-hero-meta{display:flex;justify-content:space-between;gap:18px;padding-top:40px;color:#77736a;font:600 9px var(--mono);letter-spacing:.14em}
.df-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,72px);align-items:center;min-height:590px;padding:54px 0 55px}
.df-hero-content{position:relative;z-index:2}
.df-hero-v5 .kicker{color:#55534f}.df-hero-v5 .kicker:before{background:#1D1D1B}
.df-hero-v5 h1{color:#1D1D1B;font-size:clamp(47px,5.3vw,81px);font-weight:700;line-height:1.045;letter-spacing:-.057em;max-width:710px;margin:27px 0 27px}
.df-hero-v5 h1 em{color:#1D1D1B;background:linear-gradient(to top,#F2FF24 0 21%,transparent 21%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.df-hero-v5 .hero-copy{font-size:16px;line-height:1.7;color:#555550;max-width:530px}
.df-hero-v5 .hero-ctas{gap:11px;margin-top:29px}
.df-hero-v5 .button{color:#1D1D1B;border-color:#969387}.df-hero-v5 .button.primary{color:#1D1D1B;border-color:#F2FF24}
.df-hero-v5 .hero-local{font:500 10px/1.7 var(--mono);color:#706e65;margin:25px 0 0}
.df-rig{position:relative;isolation:isolate;min-height:510px;width:100%;max-width:520px;overflow:visible}
.df-rig-upper,.df-rig-lower,.df-rig-label{position:absolute;font:600 9px var(--mono);letter-spacing:.13em;color:#6a6862}
.df-rig-upper{top:11px;left:12px;right:12px;display:flex;justify-content:space-between}
.df-rig-lower{bottom:11px;left:12px;right:12px;display:flex;align-items:center;gap:9px}
.df-rig-lower span{margin-left:auto}.df-rig-lower i{width:6px;height:6px;border-radius:50%;background:#FF6A1A;display:block}

.df-rig-label--a{right:4px;top:30%}.df-rig-label--b{left:3px;bottom:24%}
.df-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(29,29,27,.19);border-radius:50%;pointer-events:none}
.df-ring--outer{width:min(100%,485px);aspect-ratio:1;border-style:dashed;animation:df-ring-turn 65s linear infinite}
.df-ring--inner{width:min(78%,375px);aspect-ratio:1;border-style:dotted;opacity:.75}
.df-ring--calibration{width:min(112%,540px);aspect-ratio:1;border-color:rgba(29,29,27,.07);border-width:1px;animation:df-ring-breathe 8s ease-in-out infinite}
.df-rig-h,.df-rig-v{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.df-rig-h{width:109%;height:1px;background:linear-gradient(90deg,transparent,#1D1D1B24 20% 80%,transparent)}
.df-rig-v{width:1px;height:97%;background:linear-gradient(transparent,#1D1D1B24 20% 80%,transparent)}
.df-frameguide--landscape{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92%;height:50%;border:1px dashed rgba(29,29,27,.17);pointer-events:none}
.df-frameguide--portrait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45%;max-width:212px;aspect-ratio:9/16;background:rgba(255,255,255,.20);border:1px solid rgba(29,29,27,.57);box-shadow:0 2px 0 #1D1D1B12;animation:df-frame-stabilize 7s ease-in-out infinite;overflow:hidden}
.df-crop{position:absolute;width:22px;height:22px;border-style:solid;border-color:#1D1D1B;border-width:0;z-index:5}
.df-crop--tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;animation:df-crop-tl 4.5s ease-in-out infinite}
.df-crop--tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px;animation:df-crop-tr 4.5s ease-in-out infinite}
.df-crop--bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px;animation:df-crop-bl 4.5s ease-in-out infinite}
.df-crop--br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px;animation:df-crop-br 4.5s ease-in-out infinite}
.df-safe-frame{position:absolute;inset:7%;border:1px dashed rgba(29,29,27,.20)}
.df-third{position:absolute;top:0;bottom:0;width:1px;border-left:1px dashed rgba(29,29,27,.12)}
.df-third--left{left:33.333%}.df-third--right{left:66.666%}
.df-focus{position:absolute;z-index:3;left:50%;top:50%;width:46px;height:46px;border-radius:50%;border:1px solid rgba(29,29,27,.6);transform:translate(-50%,-50%);animation:df-focus-lock 4.5s ease-in-out infinite}
.df-focus i{position:absolute;top:50%;left:50%;width:75px;height:1px;background:#1D1D1B80;transform:translate(-50%,-50%)}
.df-focus i:nth-child(2){transform:translate(-50%,-50%) rotate(90deg)}
.df-focus b{position:absolute;width:7px;height:7px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:#FF6A1A}
.df-scan{position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,#5a6050 50%,transparent);opacity:.37;animation:df-scanner 8s linear infinite}
.df-hero-bottom{display:flex;gap:clamp(15px,3vw,40px);padding:20px 0 28px;border-top:1px solid rgba(29,29,27,.16);font:500 9px var(--mono);letter-spacing:.09em;color:#777269;flex-wrap:wrap}
.df-hero-bottom-end{margin-left:auto;color:#4d4b43}
@keyframes df-ring-turn{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes df-ring-breathe{0%,100%{opacity:.45;scale:1}50%{opacity:.95;scale:1.035}}
@keyframes df-frame-stabilize{0%,100%{translate:0 0}30%{translate:-1px 1px}65%{translate:1px -1px}}
@keyframes df-focus-lock{0%,100%{scale:1;opacity:.7}24%{scale:1.13;opacity:.38}47%,85%{scale:1;opacity:1}}
@keyframes df-scanner{0%{transform:translateY(0);opacity:0}20%{opacity:.32}75%{opacity:.32}100%{transform:translateY(420px);opacity:0}}
@keyframes df-crop-tl{0%,100%,60%{translate:0 0}27%{translate:-3px -3px}}
@keyframes df-crop-tr{0%,100%,60%{translate:0 0}27%{translate:3px -3px}}
@keyframes df-crop-bl{0%,100%,60%{translate:0 0}27%{translate:-3px 3px}}
@keyframes df-crop-br{0%,100%,60%{translate:0 0}27%{translate:3px 3px}}
/* Brand reskin for all sections */
.cred{background:#EAE5D9;border-color:#CFC8B8}.cred-row{font-family:var(--mono);font-size:10px;color:#66635b}.cred b{color:#1D1D1B}
.section,.format-section,.approach-section{background:#F4F0E7}
.section-head h2,.section h2,.format-section h2,.approach-section h2,.faq-section h2{color:#1D1D1B}
h2 em{color:#1D1D1B;background:linear-gradient(transparent 79%,#F2FF24 79%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.section-description{color:#66615b}
.format-section{background:#F2EEE6}.format-card,.example,.package-card{background:#FAF8F2;border-radius:3px;border-color:#D4CEC3;box-shadow:none}
.format-card:hover,.example:hover{border-color:#1D1D1B}
.format-num{font:600 11px var(--mono);color:#55534e}
.format-meta span{background:#E9E3D7;border:1px solid #D6CEC1;border-radius:0;color:#595750;font-family:var(--mono)}
.format-card h3,.sample-body h3,.use-case h3{color:#1D1D1B}
.format-card p,.sample-body p,.section-description,.sample-bottom{color:#69655e}
#work{background:#F4F0E7}.video-tab{background:#1D1D1B;color:#F2EEE6;border-color:#1D1D1B;border-radius:1px;font:500 9px var(--mono)}
.frame{background:#1D1D1B}.sample-body{background:#FAF8F2}.eyeline,.client-ref,.client-ref span,.sample-bottom strong{color:#55534f}.sample-bottom{border-color:#D6D0C6}
.benefit-section{background:#1C1D1B;border-color:#1C1D1B;color:#F2EEE6}
.benefit-section h2,.benefit-section h2 em,.benefit-section .use-case h3{color:#F2EEE6}
.benefit-section h2 em{background:linear-gradient(transparent 79%,#F2FF24 79%);color:#F2EEE6}
.benefit-section .kicker{color:#BFC0B6}.benefit-section .kicker:before{background:#BFC0B6}
.benefit-section .promise,.benefit-section .use-case p{color:#BDBCB5}
.benefit-section .use-cases,.benefit-section .use-case{border-color:#555650}
.benefit-section .case-num{color:#F2FF24;font-family:var(--mono)}
.package-section{background:#F2EEE6;border-color:#D9D2C7}
.rate-disclaimer{color:#755A18;font-family:var(--mono);letter-spacing:0}
.rate-dot{background:#F2FF24;border:1px solid #1D1D1B}
.package-card.featured{background:#F4F0E7;border-color:#67635b}
.package-card.selected{border-color:#1D1D1B;box-shadow:0 0 0 1px #1D1D1B}
.package-card h3,.package-price strong{color:#1D1D1B}
.package-kicker{font-family:var(--mono);font-weight:600;color:#5C5A52}
.package-teaser,.package-price span,.package-price small,.package-count span,.package-card li{color:#58574f}
.package-price{border-color:#D3CBBF}
.package-count strong{font-family:var(--sans);font-style:normal;color:#1D1D1B}
.package-select{background:#1D1D1B;color:#F2EEE6;border-color:#1D1D1B;border-radius:2px}
.package-select:hover,.package-card.selected .package-select{background:#F2FF24;border-color:#F2FF24;color:#1D1D1B}
.package-selected{background:#EAE5D9;border-color:#CFC6B7;border-radius:3px}
.package-selected .mini-label{color:#5B574E;font-family:var(--mono)}
.package-selected strong,.chosen-rate{color:#1D1D1B}
.package-selected p,.package-footnotes p{color:#666156}
.custom-section{background:#1C1D1B;color:#F2EEE6}
.custom-section h2,.custom-section h2 em{color:#F2EEE6}
.custom-section h2 em{background:linear-gradient(transparent 79%,#F2FF24 79%)}
.custom-section .kicker{color:#C0BEB4}.custom-section p{color:#BBB9AE}
.custom-still{border-color:#5d5a54;background:#1D1D1B;border-radius:3px}
.custom-overline{background:#1D1D1Bed;color:#F2EEE6;font-family:var(--mono)}
.approach-section{background:#F4F0E7}.step-num{color:#545149;border-color:#D0C7B7;font-family:var(--mono)}
.step h3{color:#1D1D1B}.step p{color:#67635c}
.faq-section{background:#EAE5D9;border-color:#D4CEC4}.faq-list details{border-color:#CAC3B6}
.faq-list summary{color:#1D1D1B}.faq-plus{color:#1D1D1B}
.faq-list details p{color:#635f56}
.contact{background:#F2EEE6;border-color:#CFC9BD;border-radius:3px}
.contact h2,.contact h2 em{color:#1D1D1B}.contact p,.notice{color:#605d56}
.contact .button.outline{color:#1D1D1B;border-color:#8E897F}
.footer{background:#F4F0E7;border-color:#CFC8B9;color:#77736a}
@media(max-width:1020px){.df-hero-grid{grid-template-columns:1.08fr .92fr;gap:20px}.df-rig{min-height:430px}.df-ring--outer{width:96%}.df-rig-label--a{right:-5px}}
@media(max-width:760px){.df-hero-meta{padding-top:25px}.df-hero-grid{grid-template-columns:1fr;gap:15px;padding:60px 0 28px;min-height:auto}.df-hero-v5 h1{font-size:clamp(44px,10.5vw,71px);max-width:660px}.df-rig{min-height:340px;max-width:430px;margin:0 auto}.df-frameguide--portrait{max-width:167px}.df-rig-label{font-size:8px}.df-hero-bottom{gap:14px 25px}.df-hero-bottom-end{margin-left:0;flex-basis:100%}}
@media(max-width:420px){.df-hero-v5 h1{font-size:clamp(41px,11.2vw,48px)}.df-hero-meta{font-size:8px}.df-meta-right{display:none}.df-hero-grid{padding:48px 0 20px}.df-rig{min-height:290px;width:100%;margin-top:8px}.df-ring--outer{width:93%}.df-frameguide--portrait{max-width:142px}.df-rig-label{font-size:7px}.df-rig-upper,.df-rig-lower{font-size:8px}.df-sheet-frame{inset:22px 9px 19px}.df-hero-bottom{font-size:8px}.df-hero-v5 .hero-ctas{flex-wrap:wrap;gap:8px}.df-hero-v5 .button{flex:1 0 150px;padding:0 14px}.df-hero-v5 .hero-copy{font-size:15px}}
@media(prefers-reduced-motion:reduce){.df-ring,.df-frameguide--portrait,.df-focus,.df-scan,.df-crop{animation:none!important}.df-scan{display:none}}

/* Canonical override for legacy V4 per-card selected CTA states */
.package-card .package-select{background:#1D1D1B!important;border-color:#1D1D1B!important;color:#F2EEE6!important}
.package-card.selected .package-select{background:#F2FF24!important;border-color:#F2FF24!important;color:#1D1D1B!important}
.package-card li:before{color:#1D1D1B!important}