/* All design rules are scoped to the staging presentation layer. */ .df-phase1:not(.df-top-theme) { --df-ink:#3d3d3d; --df-paper:#f0f1f1; --df-line:rgba(61,61,61,.22); } .df-phase1:not(.df-top-theme) .df-section-heading { margin:var(--df-section-space,100px) 0 var(--df-heading-gap,42px)!important; scroll-margin-top:100px; } .df-phase1:not(.df-top-theme) .df-section-heading>span { font-size:12px; letter-spacing:.22em; display:flex; align-items:center; gap:20px; } .df-phase1:not(.df-top-theme) .df-section-heading>span:after { content:""; width:64px; height:1px; background:currentColor; opacity:.45; } .df-phase1:not(.df-top-theme) .df-section-heading h2 { background:none!important; border:0!important; padding:0!important; margin:18px 0 0!important; font-family:var(--df-display,inherit); font-size:var(--df-title-size,36px)!important; font-weight:400; line-height:1.6!important; letter-spacing:.06em; } .df-phase1:not(.df-top-theme) .df-section-heading h2:before,.df-phase1:not(.df-top-theme) .df-section-heading h2:after { display:none!important; } .df-phase1:not(.df-top-theme) .df-values-band { display:flex; align-items:center; gap:24px; width:100%; padding:22px max(24px,calc((100vw - 1200px)/2)); box-sizing:border-box; border-block:1px solid var(--df-line); background:rgba(240,241,241,.94); color:var(--df-ink); text-decoration:none; } .df-phase1:not(.df-top-theme) .df-values-band .df-band-label { font-size:10px; letter-spacing:.18em; padding-right:22px; border-right:1px solid var(--df-line); } .df-phase1:not(.df-top-theme) .df-values-band strong { font-size:16px; font-weight:500; letter-spacing:.1em; white-space:nowrap; } .df-phase1:not(.df-top-theme) .df-values-band .df-band-note,.df-phase1:not(.df-top-theme) .df-values-band .df-band-link { font-size:12px; line-height:1.7; } .df-phase1:not(.df-top-theme) .df-values-band .df-band-link { margin-left:auto; white-space:nowrap; } .df-phase1:not(.df-top-theme) .df-values-band:hover .df-band-link { text-decoration:underline; text-underline-offset:6px; } .df-phase1:not(.df-top-theme) .df-outline-link { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:44px; padding:10px 20px; width:fit-content; border:1px solid currentColor; color:inherit; font-size:12px; text-decoration:none; } .df-phase1:not(.df-top-theme) .df-outline-link:hover { background:rgba(127,127,127,.12); } .df-phase1:not(.df-top-theme) .df-founder { max-width:900px; margin:0 auto 54px!important; } .df-phase1:not(.df-top-theme) .df-founder img { display:block; width:100%; height:auto; } .df-phase1:not(.df-top-theme) .df-founder figcaption { font-size:12px; line-height:1.7; margin-top:14px; color:var(--df-ink); } .df-phase1:not(.df-top-theme) .home-contact-form { padding:40px clamp(16px,4vw,56px); background:rgba(240,241,241,.85); border:1px solid var(--df-line); } .df-phase1:not(.df-top-theme) #contact { scroll-margin-top:100px; } .df-phase1:not(.df-top-theme) .df-hero-copy { position:absolute; z-index:5; left:max(24px,calc((100% - 1200px)/2)); right:24px; top:50%; transform:translateY(-50%); margin:0!important; padding:0!important; text-align:left!important; color:#fff; font-family:var(--df-display,serif); font-size:clamp(30px,3.2vw,48px); line-height:1.6; letter-spacing:.06em; font-weight:400; text-shadow:0 2px 14px rgba(0,0,0,.4); pointer-events:none; } .df-phase1:not(.df-top-theme) .df-hero-pending { opacity:0; } .df-phase1:not(.df-top-theme) .df-hero-ready { opacity:1; transition:opacity 1s ease; } .df-phase1:not(.df-top-theme) .scroll-fade-up { opacity:1; transform:none; } .df-phase1:not(.df-top-theme).df-motion .df-reveal,.df-phase1:not(.df-top-theme).df-motion .scroll-fade-up { opacity:0; transform:translateY(24px); transition:opacity 1.1s ease,transform 1.1s ease; } .df-phase1:not(.df-top-theme).df-motion .is-visible { opacity:1; transform:none; } .df-phase1:not(.df-top-theme) a:focus-visible,.df-phase1:not(.df-top-theme) button:focus-visible { outline:2px solid currentColor; outline-offset:5px; } @media(max-width:900px) { .df-phase1:not(.df-top-theme) .df-values-band { gap:14px; padding:20px 24px; flex-wrap:wrap; } .df-phase1:not(.df-top-theme) .df-values-band .df-band-note { display:none; } } @media(max-width:767px) { .df-phase1:not(.df-top-theme) .df-section-heading { margin:var(--df-section-space,68px) 0 var(--df-heading-gap,28px)!important; } .df-phase1:not(.df-top-theme) .df-section-heading h2 { font-size:var(--df-title-size,25px)!important; line-height:1.65!important; } .df-phase1:not(.df-top-theme) .df-values-band { padding:16px; display:grid; grid-template-columns:auto 1fr; gap:10px 14px; } .df-phase1:not(.df-top-theme) .df-values-band .df-band-label { padding-right:14px; } .df-phase1:not(.df-top-theme) .df-values-band strong { font-size:13px; letter-spacing:.05em; } .df-phase1:not(.df-top-theme) .df-values-band .df-band-link { grid-column:2; font-size:11px; margin:0; } .df-phase1:not(.df-top-theme) .df-founder { margin-bottom:32px!important; } .df-phase1:not(.df-top-theme) .df-hero-copy { font-size:clamp(18px,6vw,26px); line-height:1.75; letter-spacing:.025em; left:24px; right:24px; } } @media(prefers-reduced-motion:reduce) { .df-phase1:not(.df-top-theme) .df-reveal,.df-phase1:not(.df-top-theme) .scroll-fade-up,.df-phase1:not(.df-top-theme) .df-hero-pending,.df-phase1:not(.df-top-theme) .df-hero-ready { opacity:1!important; transform:none!important; transition:none!important; } .df-phase1:not(.df-top-theme) .df-hero-copy { transform:translateY(-50%)!important; } } .df-phase1:not(.df-top-theme) .df-vision { position:relative; width:min(1200px,calc(100vw - 64px)); max-width:none; left:50%; transform:translateX(-50%); padding:86px 70px 78px; margin:0 0 70px!important; background:transparent; } .df-phase1:not(.df-top-theme) .df-vision h2.df-vision-label { font-size:12px!important; font-weight:400; letter-spacing:.24em; background:none!important; padding:0!important; border:0!important; margin:0 0 30px!important; } .df-phase1:not(.df-top-theme) .df-vision h2:before,.df-phase1:not(.df-top-theme) .df-vision h2:after { display:none!important; } .df-phase1:not(.df-top-theme) .df-vision p { text-align:left!important; font-size:16px!important; line-height:2.25; letter-spacing:.06em; margin:0 0 18px!important; } .df-phase1:not(.df-top-theme) .df-vision p:empty { display:none; } .df-phase1:not(.df-top-theme) .df-vision p strong { display:block; font-size:30px; line-height:1.8; font-weight:500; margin-bottom:22px; } /* A full-width shell escapes only the article column; each inner grid has its own limit. */ .df-phase1:not(.df-top-theme) #main_content .post_content .df-wide { box-sizing:border-box; position:relative; left:auto; transform:none; width:var(--df-viewport,100vw)!important; min-width:0; max-width:none!important; margin:0 calc((100% - var(--df-viewport,100vw))/2)!important; padding:var(--df-section-space,88px) 0; clear:both; } .df-phase1:not(.df-top-theme) .df-wide > .df-container { box-sizing:border-box; width:calc(100% - 96px); max-width:1200px!important; margin:0 auto!important; padding:0!important; } .df-phase1:not(.df-top-theme) .df-wide .df-services,.df-phase1:not(.df-top-theme) .df-wide .df-works { width:100%; max-width:none; margin:0!important; padding:0; position:static; transform:none; } .df-phase1:not(.df-top-theme) .df-wide--services { color:#3d3d3d; background:transparent; } .df-phase1:not(.df-top-theme) .df-wide--works { color:#eef0f0; background:#202629; --df-line:rgba(240,241,241,.24); } .df-phase1:not(.df-top-theme) .df-wide .df-section-heading { margin:0 0 var(--df-heading-gap,42px)!important; } .df-phase1:not(.df-top-theme) .df-wide .df-section-heading h2 { color:inherit; font-size:var(--df-title-size,34px)!important; font-weight:400; letter-spacing:.06em; } .df-phase1:not(.df-top-theme) .df-wide h3,.df-phase1:not(.df-top-theme) .df-wide h4 { background:none!important; border:0!important; box-shadow:none!important; padding:0!important; color:inherit; } .df-phase1:not(.df-top-theme) .df-wide h3:before,.df-phase1:not(.df-top-theme) .df-wide h3:after,.df-phase1:not(.df-top-theme) .df-wide h4:before,.df-phase1:not(.df-top-theme) .df-wide h4:after { content:none!important; } .df-phase1:not(.df-top-theme) .df-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .df-phase1:not(.df-top-theme) .df-service-card { box-sizing:border-box; position:relative; isolation:isolate; overflow:hidden; min-height:368px; padding:36px 32px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; background:#1d2427; color:#fff; } .df-phase1:not(.df-top-theme) .df-service-card > img { position:absolute; inset:0; z-index:-2; display:block; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover; object-position:65% center; transform:none; } .df-phase1:not(.df-top-theme) .df-service-card:before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(12,19,23,.72) 0%,rgba(12,19,23,.26) 50%,rgba(12,19,23,0) 82%),linear-gradient(0deg,rgba(12,19,23,.68),transparent 72%); } .df-phase1:not(.df-top-theme) .df-service-number { font-family:Georgia,serif; font-size:36px; line-height:1; font-weight:400; display:flex; gap:16px; align-items:center; } .df-phase1:not(.df-top-theme) .df-service-number small { font-family:var(--df-reading,sans-serif); font-size:10px; letter-spacing:.14em; opacity:1; } .df-phase1:not(.df-top-theme) .df-service-card h3 { font-size:25px!important; font-weight:400; line-height:1.65!important; letter-spacing:.03em; margin:20px 0 12px!important; } .df-phase1:not(.df-top-theme) .df-service-card p { font-size:13px; line-height:2; margin:0 0 20px!important; max-width:28em; letter-spacing:.025em; } .df-phase1:not(.df-top-theme) .df-service-secondary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:24px 0 0; } .df-phase1:not(.df-top-theme) .df-service-secondary .df-service-card { min-height:288px; padding:26px; min-width:0; color:#fff; } .df-phase1:not(.df-top-theme) .df-service-secondary h3 { font-size:22px!important; font-weight:400; line-height:1.7!important; margin:18px 0 12px!important; } .df-phase1:not(.df-top-theme) .df-service-secondary p { font-size:12px; line-height:1.9; margin:0 0 16px!important; max-width:23em; } .df-phase1:not(.df-top-theme) .df-service-secondary a { color:inherit; font-size:12px; text-underline-offset:5px; } .df-phase1:not(.df-top-theme) .df-works-intro { font-size:15px; line-height:2; max-width:640px; margin:0 0 56px!important; } .df-phase1:not(.df-top-theme) .df-work-category { margin:0 0 76px!important; } .df-phase1:not(.df-top-theme) .df-work-category:last-of-type { margin-bottom:0!important; } .df-phase1:not(.df-top-theme) .df-work-category h3 { font-size:22px!important; font-weight:400; line-height:1.7!important; letter-spacing:.07em; margin:0 0 26px!important; display:flex; gap:24px; align-items:center; } .df-phase1:not(.df-top-theme) .df-work-category h3:after { content:""!important; position:static; flex:1; height:1px; background:var(--df-line); } .df-phase1:not(.df-top-theme) .df-work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 24px; } .df-phase1:not(.df-top-theme) .df-work { min-width:0; } .df-phase1:not(.df-top-theme) .df-video { display:block; box-sizing:border-box; position:relative; width:100%; aspect-ratio:16/9; height:auto; margin:0; padding:0; overflow:hidden; border:0; background:#161b1d; color:#fff; cursor:pointer; } .df-phase1:not(.df-top-theme) .df-video > img { display:block; position:absolute; inset:0; width:100%!important; height:100%!important; object-fit:cover; } .df-phase1:not(.df-top-theme) .df-video:after { content:"\25B6"; display:grid; place-items:center; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border:1px solid #fff; border-radius:50%; background:rgba(0,0,0,.35); font-size:16px; text-indent:3px; } .df-phase1:not(.df-top-theme) .df-video:hover:after { background:rgba(0,0,0,.7); } .df-phase1:not(.df-top-theme) .df-video-frame { display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; } .df-phase1:not(.df-top-theme) .df-work h4 { font-size:17px!important; font-weight:400; line-height:1.8; letter-spacing:.04em; margin:18px 0 4px!important; } .df-phase1:not(.df-top-theme) .df-work p { font-size:12px; line-height:1.8; margin:0!important; color:#d6dcdd; } .df-phase1:not(.df-top-theme) .df-work-original { display:inline-block; margin-top:12px; font-size:11px; color:#d6dcdd; text-underline-offset:4px; } .df-phase1:not(.df-top-theme) .df-works-more { margin:52px 0 0!important; text-align:center; } .df-phase1:not(.df-top-theme) .df-wide a { color:inherit; } .df-phase1:not(.df-top-theme) .df-layout-check { position:relative; margin:24px; padding:16px; border:1px solid #9da7ab; background:#fff; color:#1d2529; font:13px/1.8 sans-serif; } .df-phase1:not(.df-top-theme) .df-layout-check pre { white-space:pre-wrap; font:inherit; } @media(max-width:1023px) { .df-phase1:not(.df-top-theme) .df-service-card { padding:28px; } .df-phase1:not(.df-top-theme) .df-service-card h3 { font-size:21px!important; } } @media(max-width:767px) { .df-phase1:not(.df-top-theme) #main_content .post_content .df-wide { padding:var(--df-section-space,52px) 0; } .df-phase1:not(.df-top-theme) .df-wide > .df-container { width:calc(100% - 40px); } .df-phase1:not(.df-top-theme) .df-service-grid,.df-phase1:not(.df-top-theme) .df-service-secondary,.df-phase1:not(.df-top-theme) .df-work-grid { grid-template-columns:1fr; gap:24px; } .df-phase1:not(.df-top-theme) .df-wide .df-section-heading h2 { font-size:var(--df-title-size,25px)!important; } .df-phase1:not(.df-top-theme) .df-service-card { min-height:360px; padding:28px 24px; } .df-phase1:not(.df-top-theme) .df-work-category { margin-bottom:48px!important; } .df-phase1:not(.df-top-theme) .df-work-category h3 { font-size:18px!important; } .df-phase1:not(.df-top-theme) .df-vision { width:100%; left:auto; transform:none; padding:42px 20px; } .df-phase1:not(.df-top-theme) .df-vision p { font-size:14px!important; } .df-phase1:not(.df-top-theme) .df-vision p strong { font-size:23px; } } /* Five provisional service illustrations; no Works imagery is changed. */ .df-phase1:not(.df-top-theme) .df-services-image-note { font-size:11px!important; line-height:1.8; color:#555; margin:18px 0 0!important; } .df-phase1:not(.df-top-theme) .df-service-secondary .df-service-number { font-size:30px; } .df-phase1:not(.df-top-theme) .df-services .df-service-card a { position:relative; text-decoration:none; } .df-phase1:not(.df-top-theme) .df-services .df-service-card a:hover { text-decoration:underline; text-underline-offset:5px; } @media(max-width:767px) { .df-phase1:not(.df-top-theme) .df-services .df-service-card { min-height:360px; padding:28px 24px; } .df-phase1:not(.df-top-theme) .df-services .df-service-card > img { object-position:68% center; } .df-phase1:not(.df-top-theme) .df-services .df-service-card h3 { font-size:21px!important; } .df-phase1:not(.df-top-theme) .df-services .df-service-card p { font-size:13px!important; line-height:2; } .df-phase1:not(.df-top-theme) .df-services .df-service-card:before { background:linear-gradient(0deg,rgba(12,19,23,.9) 0%,rgba(12,19,23,.55) 45%,rgba(12,19,23,.08) 85%); } .df-phase1:not(.df-top-theme) .df-service-secondary .df-service-card { min-height:320px; } } /* TOP cinematic system v8. One source per component; no external font requests. */ .df-top-theme{--df-display:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;--df-reading:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;--df-ink:#292e30;--df-paper:#eceeee;--df-line:rgba(42,49,52,.2);--df-space:88px;--df-gutter:48px;--df-title:clamp(32px,3.05vw,44px)} #body_wrap.df-top-theme{background:transparent!important;isolation:isolate} #body_wrap.df-top-theme::before{content:"";position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 15%,rgba(215,223,226,.24),transparent 65%),linear-gradient(rgba(239,240,239,.95),rgba(234,237,237,.97)),url("https://documentaryfilms.co.jp/wp-content/uploads/2026/04/DocumentaryFilmsInc_HP_background.png") center/cover no-repeat!important} .df-top-theme .l-content,.df-top-theme #main_content,.df-top-theme .post_content{background:transparent!important;box-shadow:none} .df-top-theme .post_content{font-family:var(--df-reading);font-size:16px;line-height:2;color:var(--df-ink);letter-spacing:.025em} .df-top-theme #main_content .post_content .df-editorial,.df-top-theme #main_content .post_content .df-wide,.df-top-theme #main_content .post_content .df-vision{box-sizing:border-box;position:relative;width:var(--df-viewport,100vw)!important;max-width:none!important;margin:0 calc((100% - var(--df-viewport,100vw))/2)!important;left:auto;transform:none;padding:var(--df-space) var(--df-gutter);clear:both} .df-top-theme .df-editorial>*,.df-top-theme .df-wide>.df-container{box-sizing:border-box;width:100%;max-width:1200px!important;margin-left:auto!important;margin-right:auto!important} .df-top-theme .df-wide>.df-container{padding:0!important} .df-top-theme .df-editorial>.df-section-heading{margin-left:auto!important;margin-right:auto!important} .df-top-theme .df-section-heading{margin:0 0 40px!important;scroll-margin-top:110px} .df-top-theme .df-section-heading>span,.df-top-theme .df-vision-label{display:flex;align-items:center;gap:18px;font:400 13px/1.6 var(--df-reading)!important;letter-spacing:.2em!important} .df-top-theme .df-section-heading>span:after{content:"";height:1px;width:40px;background:currentColor;opacity:.45} .df-top-theme .df-section-heading h2{font:400 var(--df-title)/1.55 var(--df-display)!important;letter-spacing:.07em!important;margin:18px 0 0!important;padding:0!important;border:0!important;background:none!important;color:inherit;text-wrap:balance} .df-top-theme .df-section-heading h2:before,.df-top-theme .df-section-heading h2:after,.df-top-theme .df-vision-label:before,.df-top-theme .df-vision-label:after{display:none!important} .df-top-theme .df-hero-copy{position:absolute;z-index:5;left:max(24px,calc((100% - 1200px)/2));right:24px;top:52%;transform:translateY(-50%);margin:0!important;padding:0!important;text-align:left!important;color:#fff;font:400 clamp(30px,3.2vw,48px)/1.6 var(--df-display);letter-spacing:.07em;text-shadow:0 2px 14px #0006;pointer-events:none} .df-top-theme .df-hero-copy span{white-space:nowrap} .df-top-theme .df-hero-copy:before,.df-top-theme .df-hero-copy:after{content:none!important} .df-top-theme .df-hero-pending{opacity:0} .df-top-theme .df-hero-ready{opacity:1;transition:opacity 1s ease} .df-top-theme .df-values-band{display:flex;align-items:center;gap:24px;width:100%;box-sizing:border-box;padding:22px max(24px,calc((100vw - 1200px)/2));background:transparent;color:var(--df-ink);text-decoration:none;border-bottom:1px solid var(--df-line)} .df-top-theme .df-band-label{font:10px var(--df-reading);letter-spacing:.2em} .df-top-theme .df-values-band strong{font:400 16px var(--df-display);letter-spacing:.1em;white-space:nowrap} .df-top-theme .df-band-note,.df-top-theme .df-band-link{font:12px/1.8 var(--df-reading)} .df-top-theme .df-band-link{margin-left:auto;white-space:nowrap} /* Vision: a short editorial introduction; all original paragraphs remain. */ .df-top-theme #main_content .post_content .df-vision{display:block;padding-top:64px;padding-bottom:64px} .df-top-theme h2.df-vision-label{margin:0 auto 24px!important;padding:0!important;border:0!important;background:none!important;align-self:start} .df-top-theme .df-vision p{font:400 15px/2 var(--df-reading)!important;letter-spacing:.035em;text-align:left!important;margin:0 0 18px!important;max-width:48em} .df-top-theme .df-vision p:empty{display:none} .df-top-theme .df-vision p strong{display:block;font:400 clamp(25px,2.3vw,34px)/1.65 var(--df-display);letter-spacing:.05em;margin-bottom:24px} /* Values: original philosophy, restrained imagery fading away to the right. */ .df-top-theme .df-values-section{isolation:isolate;padding-bottom:88px;background:transparent} .df-top-theme .df-values-section .values-text-wrap{position:relative;display:block;max-width:1200px!important;padding:0!important;margin:0 auto!important} .df-top-theme .df-values-copy p{font:400 17px/2.2 var(--df-display)!important;letter-spacing:.04em;text-align:left!important;margin:0 0 26px!important} .df-top-theme .df-values-copy{max-width:650px} .df-top-theme .df-values-copy p:last-child{margin-bottom:0!important} .df-top-theme .df-values-gallery[hidden]{display:none!important} .df-top-theme .values-text-wrap .floating-img{display:none!important} .df-top-theme .df-phrase{display:inline-block;max-width:100%;vertical-align:baseline} .df-top-theme .df-values-section:before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 0 0 44%;background:url("https://documentaryfilms.co.jp/wp-content/uploads/2026/04/DocumentaryFilmsInc_HP_background.png") right center/cover no-repeat;opacity:.18;mask-image:linear-gradient(90deg,transparent 0%,#000 36%,#000 58%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 36%,#000 58%,transparent 100%)} .df-top-theme .df-values-subtitle{font:400 23px/1.8 var(--df-display)!important;letter-spacing:.04em;margin:20px 0 0!important} .df-top-theme .df-vision-copy,.df-top-theme h2.df-vision-label{width:100%;max-width:1200px;margin-left:auto!important;margin-right:auto!important} .df-top-theme #main_visual:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(5,12,17,.2),transparent 68%)} /* Services: the two core services receive larger images and separate descriptions. */ .df-top-theme .df-services,.df-top-theme .df-works{width:100%;margin:0!important;padding:0} .df-top-theme .df-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .df-top-theme .df-service-feature{min-width:0} .df-top-theme .df-service-card{box-sizing:border-box;position:relative;isolation:isolate;overflow:hidden;min-height:360px;padding:32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;background:#1b2327;color:#fff} .df-top-theme .df-service-card>img{position:absolute;inset:0;z-index:-2;display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:65% center} .df-top-theme .df-service-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,15,20,.86),rgba(8,15,20,.25) 55%,transparent 100%),linear-gradient(90deg,rgba(8,15,20,.24),transparent 80%)} .df-top-theme .df-service-number{font:400 34px/1 Georgia,serif;display:flex;gap:16px;align-items:center} .df-top-theme .df-service-number small{font:11px/1.5 var(--df-reading);letter-spacing:.12em} .df-top-theme .df-service-card h3{font:400 clamp(21px,1.8vw,26px)/1.65 var(--df-display)!important;letter-spacing:.03em;margin:20px 0 24px!important;color:inherit;background:none!important;border:0!important;padding:0!important;box-shadow:none;text-wrap:balance} .df-top-theme .df-service-card h3:before,.df-top-theme .df-service-card h3:after{content:none!important} .df-top-theme .df-service-description{font:400 14px/2 var(--df-reading)!important;margin:20px 0 0!important;max-width:36em;letter-spacing:.025em} .df-top-theme .df-outline-link{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:44px;padding:10px 20px;border:1px solid #ffffff9c;color:inherit;font:12px/1.5 var(--df-reading);text-decoration:none} .df-top-theme .df-service-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0 0} .df-top-theme .df-service-secondary .df-service-card{min-height:280px;padding:24px} .df-top-theme .df-service-secondary .df-service-number{font-size:25px} .df-top-theme .df-service-secondary h3{font-size:20px!important;margin:14px 0 10px!important} .df-top-theme .df-service-secondary p{font:400 13px/1.9 var(--df-reading)!important;max-width:24em;margin:0 0 16px!important} .df-top-theme .df-service-secondary a{font:12px/1.8 var(--df-reading);color:inherit;text-underline-offset:5px} /* Works: uninterrupted dark gallery with preserved order and media. */ .df-top-theme .df-wide--works{background:radial-gradient(ellipse at 90% 0%,rgba(77,96,108,.17),transparent 52%),linear-gradient(rgba(13,19,23,.96),rgba(13,19,23,.98)),url("https://documentaryfilms.co.jp/wp-content/uploads/2026/04/DocumentaryFilmsInc_HP_background.png") center top/cover no-repeat;color:#eef0ef;--df-line:#ffffff32} .df-top-theme .df-wide--works h2{color:inherit} .df-top-theme .df-works-intro{font:15px/2 var(--df-reading)!important;max-width:640px;margin:0 0 40px!important;color:#cbd0d1} .df-top-theme .df-work-category{margin:0 0 64px!important} .df-top-theme .df-work-category:last-of-type{margin-bottom:0!important} .df-top-theme .df-work-category h3{display:flex;align-items:center;gap:24px;font:400 23px/1.7 var(--df-display)!important;letter-spacing:.07em;margin:0 0 24px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none;color:inherit} .df-top-theme .df-work-category h3:before{content:none!important} .df-top-theme .df-work-category h3:after{content:""!important;position:static;flex:1;height:1px;background:var(--df-line)} .df-top-theme .df-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px} .df-top-theme .df-work{min-width:0} .df-top-theme .df-video,.df-top-theme .df-video-frame{display:block;box-sizing:border-box;position:relative;width:100%;aspect-ratio:16/9;height:auto;margin:0;padding:0;border:0;overflow:hidden;background:#0e1417;color:#fff} .df-top-theme .df-video{cursor:pointer} .df-top-theme .df-video>img{display:block;position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover} .df-top-theme .df-video:after{content:"\25B6";display:grid;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border:1px solid #fff;border-radius:50%;background:#0005;font-size:16px;text-indent:3px;transition:background .2s} .df-top-theme .df-video:hover:after{background:#000a} .df-top-theme .df-work h4{font:400 17px/1.8 var(--df-display)!important;letter-spacing:.03em;margin:18px 0 6px!important;background:none!important;border:0!important;padding:0!important;color:inherit} .df-top-theme .df-work h4:before,.df-top-theme .df-work h4:after{content:none!important} .df-top-theme .df-work p{font:12px/1.8 var(--df-reading)!important;margin:0!important;color:#cbd0d1} .df-top-theme .df-work-original{display:inline-block;margin-top:10px;color:#cbd0d1;font:11px/1.8 var(--df-reading);text-underline-offset:4px} .df-top-theme .df-works-more{margin:44px 0 0!important;text-align:center} .df-top-theme .df-wide a{color:inherit} /* About: real portrait and company details have equal visual status. */ .df-top-theme .df-about-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start} .df-top-theme .df-founder{margin:0!important;max-width:900px} .df-top-theme .df-founder img{display:block;width:100%;height:auto} .df-top-theme .df-founder figcaption{font:11px/1.8 var(--df-reading);margin-top:14px;color:#5a6265} .df-top-theme .df-company-title{font:400 24px/1.6 var(--df-display)!important;margin:0 0 24px!important;padding:0!important;border:0!important;background:none!important} .df-top-theme .df-company-title:before,.df-top-theme .df-company-title:after{content:none!important} .df-top-theme .df-about-layout .about-summary-new{margin:0!important;max-width:none;padding:0!important} .df-top-theme .df-about-layout .wp-block-columns{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px!important;padding:14px 0!important} .df-top-theme .df-about-layout .wp-block-column p{font:13px/1.9 var(--df-reading)!important;text-align:left} .df-top-theme #contact{margin:0 0 36px!important;scroll-margin-top:110px} .df-top-theme .home-contact-form{padding:0;background:transparent;border:0;max-width:800px!important;margin-left:max(0px,calc((100% - 1200px)/2))!important} /* Motion and focus retain the existing timings. */ .df-top-theme .scroll-fade-up{opacity:1;transform:none} .df-top-theme.df-motion .df-reveal,.df-top-theme.df-motion .scroll-fade-up{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s ease} .df-top-theme.df-motion .is-visible{opacity:1;transform:none} .df-top-theme a:focus-visible,.df-top-theme button:focus-visible{outline:2px solid currentColor;outline-offset:5px} .df-top-theme .df-layout-check{position:relative;margin:24px;padding:16px;border:1px solid #9da7ab;background:#fff;color:#1d2529;font:13px/1.8 sans-serif} .df-top-theme .df-layout-check pre{white-space:pre-wrap;font:inherit} @media(max-width:1023px){ .df-top-theme{--df-gutter:32px;--df-space:72px} .df-top-theme .df-values-copy{max-width:620px} .df-top-theme .df-service-card{padding:24px} .df-top-theme .df-service-secondary{gap:16px} .df-top-theme .df-service-secondary .df-service-card{padding:20px;min-height:300px} .df-top-theme .df-band-note{display:none} .df-top-theme .df-about-layout{gap:32px} } @media(max-width:767px){ .df-top-theme{--df-gutter:20px;--df-space:56px;--df-title:clamp(26px,7vw,30px)} .df-top-theme .df-section-heading{margin-bottom:28px!important} .df-top-theme .df-section-heading h2{letter-spacing:.04em!important} .df-top-theme .df-hero-copy{font-size:clamp(18px,6vw,26px);line-height:1.75;letter-spacing:.025em;left:24px;right:24px} .df-top-theme .df-values-band{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;padding:16px 20px} .df-top-theme .df-values-band strong{font-size:13px;letter-spacing:.04em} .df-top-theme .df-band-link{grid-column:2;margin:0;font-size:11px} .df-top-theme #main_content .post_content .df-vision{display:block;padding:40px 20px} .df-top-theme h2.df-vision-label{margin:0 0 20px!important} .df-top-theme .df-vision p{font-size:14px!important} .df-top-theme .df-vision p strong{font-size:clamp(20px,6vw,25px)} .df-top-theme .df-vision-statement .df-phrase,.df-top-theme .df-about-statement .df-phrase,.df-top-theme .df-corporate-title .df-phrase{display:block} .df-top-theme .df-corporate-title .df-phrase{white-space:nowrap} .df-top-theme .df-values-section .values-text-wrap{display:block} .df-top-theme .df-values-copy p{font-size:15px!important;line-height:2.15!important} .df-top-theme .df-values-copy br{display:none} .df-top-theme .df-values-subtitle{font-size:20px!important} .df-top-theme .df-values-section:before{inset:0;opacity:.07} .df-top-theme .df-section-heading>span,.df-top-theme h2.df-vision-label{font-size:12px!important} .df-top-theme .df-service-grid,.df-top-theme .df-service-secondary,.df-top-theme .df-work-grid,.df-top-theme .df-about-layout{grid-template-columns:1fr;gap:28px} .df-top-theme .df-service-card{min-height:340px;padding:24px} .df-top-theme .df-service-card>img{object-position:68% center} .df-top-theme .df-service-card h3{font-size:clamp(19px,5.8vw,23px)!important} .df-top-theme .df-service-description{font-size:14px!important;margin-top:16px!important} .df-top-theme .df-service-secondary{margin-top:32px} .df-top-theme .df-service-secondary .df-service-card{min-height:290px;padding:24px} .df-top-theme .df-service-secondary h3{font-size:21px!important} .df-top-theme .df-service-secondary p{font-size:13px!important} .df-top-theme .df-works-intro{font-size:14px!important;margin-bottom:36px!important} .df-top-theme .df-work-category{margin-bottom:44px!important} .df-top-theme .df-work-category h3{font-size:20px!important;gap:16px} .df-top-theme .df-work h4{font-size:16px!important} .df-top-theme .df-work p{font-size:12px!important} .df-top-theme #contact{margin-top:0!important} .df-top-theme .home-contact-form{padding-bottom:0} } @media(prefers-reduced-motion:reduce){.df-top-theme .df-reveal,.df-top-theme .scroll-fade-up,.df-top-theme .df-hero-pending,.df-top-theme .df-hero-ready{opacity:1!important;transform:none!important;transition:none!important}.df-top-theme .df-hero-copy{transform:translateY(-50%)!important}} /* * DF TOP v9.1 — finishing candidate, 2026-10-19. * Append after the existing phase1.css (v9). Only the existing TOP scope. * Presentation only. The companion JS adds one semantic heading break. * No PHP, URL, database, form or safety-setting changes. * Original hero/video dimensions, Works grid, logos and content remain unchanged. */ /* Values: retain v9's non-overlapping composition; use an existing Values photo. The white/light source used in v9 becomes practically invisible at 18% opacity. Keep photography strictly to the right of the main reading area on desktop. */ .df-top-theme .df-values-section::before { inset: 225px max(0px, calc((100% - 1440px) / 2)) 100px 53%; background-image: url("https://documentaryfilms.co.jp/wp-content/uploads/2026/04/名称未設定のデザイン-4-1024x576.png"); background-position: 52% center; background-size: cover; opacity: .64; filter: grayscale(.6) saturate(.65); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .df-top-theme .df-values-copy p { line-break: strict; word-break: normal; } /* Collapse empty source blocks, not the intended photographic transition bands. */ .df-top-theme .post_content > p:empty { display: none; } /* Company details: supersede legacy mobile group/column margins that introduced large row gaps and single-character label wraps. Do not change the information. */ .df-top-theme .df-about-layout .about-summary-new .wp-block-columns { margin: 0 !important; } .df-top-theme .df-about-layout .about-summary-new .wp-block-column { min-width: 0; margin: 0 !important; } .df-top-theme .df-about-layout .about-summary-new .wp-block-column p { margin: 0 !important; } .df-top-theme .df-about-layout .about-summary-new .wp-block-group.is-row { flex-wrap: wrap !important; gap: 10px 12px; margin-bottom: 0 !important; } .df-top-theme .df-about-layout .about-summary-new .wp-block-social-links { flex-shrink: 0; margin-left: 0 !important; } /* Contact: align with the 1200px editorial grid, clarify the panel and give the existing submit control an unambiguous visual hierarchy. No new form fields. */ .df-top-theme #main_content .post_content .df-contact-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 64px; align-items: start; padding-inline: max(var(--df-gutter), calc((var(--df-viewport, 100vw) - 1200px) / 2)); } .df-top-theme .df-contact-section #contact { width: 100%; margin: 0 !important; } .df-top-theme .df-contact-section #contact h2 { text-wrap: initial; line-break: strict; } .df-top-theme .df-contact-statement .df-phrase { display: block; } .df-top-theme .df-contact-section #contact::after { content: ""; display: block; width: 100%; aspect-ratio: 4/3; margin-top: 40px; background: linear-gradient(180deg, rgba(19,28,33,.02), rgba(19,28,33,.2)), url("https://documentaryfilms.co.jp/wp-content/themes/swell/df-brand-site/services-images/05_other_production.webp") 64% center / cover no-repeat; } .df-top-theme .df-contact-section .home-contact-form { box-sizing: border-box; width: 100%; max-width: none !important; margin: 0 !important; padding: 36px !important; border: 1px solid rgba(65, 78, 84, .16); background: rgba(249, 249, 247, .68); } .df-top-theme .df-contact-section .home-contact-form .wp-block-group__inner-container { margin: 0 !important; padding: 0 !important; } .df-top-theme .df-contact-section .wpcf7-form > p { margin: 0 0 24px !important; font: 400 14px/1.85 var(--df-reading) !important; } .df-top-theme .df-contact-section .wpcf7-form > p:last-of-type { margin-bottom: 0 !important; } .df-top-theme .df-contact-section label { display: block; } .df-top-theme .df-contact-section .wpcf7-form-control-wrap { display: block; margin-top: 8px; } .df-top-theme .df-contact-section input[type="text"], .df-top-theme .df-contact-section input[type="email"], .df-top-theme .df-contact-section input[type="tel"], .df-top-theme .df-contact-section textarea { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #bdc3c4; border-radius: 0; background: #f6f7f5; color: #292e30; font: 400 16px/1.6 var(--df-reading) !important; } .df-top-theme .df-contact-section textarea { display: block; height: 190px; min-height: 160px; resize: vertical; } .df-top-theme .df-contact-section input:focus-visible, .df-top-theme .df-contact-section textarea:focus-visible { outline: 2px solid #3b505b; outline-offset: 3px; } .df-top-theme .df-contact-section input[type="submit"] { display: block; box-sizing: border-box; width: 100%; min-height: 54px; padding: 14px 24px; margin: 0; border: 1px solid #283238; border-radius: 0; background: #283238; color: #fff; font: 400 15px/1.6 var(--df-reading) !important; letter-spacing: .12em; cursor: pointer; transition: background .2s ease; } .df-top-theme .df-contact-section input[type="submit"]:hover { background: #3b4a51; } @media (max-width: 1023px) { .df-top-theme .df-contact-section #contact::after { display: none; } .df-top-theme .df-values-section::before { inset-inline-start: 55%; opacity: .42; } .df-top-theme #main_content .post_content .df-contact-section { grid-template-columns: 1fr; gap: 32px; } .df-top-theme .df-contact-section .home-contact-form { max-width: 800px !important; margin-inline: auto !important; } } @media (max-width: 767px) { /* Put imagery after the copy instead of behind it on narrow screens. */ .df-top-theme .df-values-section::before { content: none; } .df-top-theme .df-values-section::after { content: ""; display: block; position: relative; width: 100%; aspect-ratio: 16/9; margin: 28px 0 0; background: url("https://documentaryfilms.co.jp/wp-content/uploads/2026/04/名称未設定のデザイン-4-1024x576.png") center / cover no-repeat; opacity: .83; filter: grayscale(.6) saturate(.65); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 94%, transparent 100%); } .df-top-theme .df-values-section .values-text-wrap { margin-bottom: 0 !important; } .df-top-theme .df-service-card h3.df-corporate-title { font-size: clamp(17px, 5.2vw, 23px) !important; } .df-top-theme .df-about-layout .about-summary-new .wp-block-columns { grid-template-columns: 1fr; gap: 7px !important; padding: 16px 0 !important; } .df-top-theme .df-about-layout .about-summary-new .wp-block-column:first-child p { font: 400 12px/1.8 var(--df-reading) !important; color: #60696d; letter-spacing: .04em; } .df-top-theme .df-about-layout .about-summary-new .wp-block-column:last-child p { font: 400 14px/1.9 var(--df-reading) !important; letter-spacing: .015em; overflow-wrap: anywhere; } .df-top-theme .df-contact-section .home-contact-form { padding: 24px 20px !important; } .df-top-theme .df-contact-section .wpcf7-form > p { font-size: 13px !important; } .df-top-theme .df-contact-section textarea { height: 180px; } } /* DF TOP v9.3 — 2026-10-19. Staging TOP presentation only. Loaded after the v9.1 rules. Hero media dimensions/URLs are not overridden. No font files, database edits or new form fields. */ .df-top-theme { --df-label:22px; } .df-top-theme .df-section-heading>span, .df-top-theme h2.df-vision-label { font:500 var(--df-label)/1.5 var(--df-reading)!important; letter-spacing:.13em!important; gap:22px; } .df-top-theme .df-section-heading>span:after {width:48px;opacity:.38;} .df-top-theme .df-section-heading h2 {margin-top:18px!important;} .df-top-theme .df-band-label {font-size:12px;letter-spacing:.13em;} .df-top-theme .df-values-band strong {font-size:18px;} .df-top-theme .df-band-note,.df-top-theme .df-band-link {font-size:13px;} .df-top-theme .df-values-band {padding-inline:max(var(--df-gutter),calc((100% - 1200px)/2));gap:22px;} /* A real content group: headline, supporting copy, then a meaningful action. */ .df-top-theme #main_visual:after { background:linear-gradient(90deg,rgba(6,13,18,.64) 0%,rgba(6,13,18,.55) 48%,rgba(6,13,18,.10) 100%); } .df-top-theme .df-hero-content { position:absolute;z-index:5;top:50%;transform:translateY(-50%); left:max(var(--df-gutter),calc((100% - 1200px)/2));right:var(--df-gutter); width:auto;max-width:820px;max-height:calc(100% - 40px);overflow-y:auto; box-sizing:border-box;padding:4px 6px 6px 0;scrollbar-width:thin;color:#fff; } .df-top-theme .df-hero-content .df-hero-copy { position:static!important;inset:auto!important;transform:none!important; font:400 clamp(30px,3.2vw,46px)/1.55 var(--df-display)!important; letter-spacing:.045em!important;pointer-events:auto;text-align:left!important; margin:0!important;max-width:100%;color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.3); } .df-top-theme .df-hero-content .df-hero-copy span {white-space:normal;} .df-top-theme .df-hero-support { font:400 14px/1.95 var(--df-reading);letter-spacing:.045em; margin:18px 0 0;max-width:41em;text-align:left;text-wrap:pretty;color:#fff; } .df-top-theme .df-hero-support span {display:block;} .df-top-theme .df-hero-play { display:inline-flex;align-items:center;gap:16px;min-height:48px; padding:0 6px 0 0;margin:22px 0 0;color:#fff;background:transparent;border:0; font:400 12px/1.6 var(--df-reading);letter-spacing:.13em;cursor:pointer;text-align:left; } .df-top-theme .df-hero-play-icon { display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px; border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(0,0,0,.12); transition:background .2s ease,transform .2s ease; } .df-top-theme .df-hero-play-icon svg {width:15px;height:15px;margin-left:3px;fill:currentColor;} .df-top-theme .df-hero-play-label {display:flex;flex-direction:column;gap:2px;} .df-top-theme .df-hero-play-label small {font-size:11px;letter-spacing:.06em;} .df-top-theme .df-hero-play:hover .df-hero-play-icon {background:rgba(255,255,255,.18);transform:scale(1.04);} .df-top-theme .df-hero-pause { position:absolute;right:var(--df-gutter);bottom:16px;z-index:6;display:flex;align-items:center;gap:8px; min-width:44px;min-height:44px;padding:8px 14px;background:rgba(7,14,18,.68);color:#fff; border:1px solid rgba(255,255,255,.55);border-radius:0;font:12px/1.5 var(--df-reading);cursor:pointer; } .df-top-theme .df-hero-pause-icon {font-size:14px;letter-spacing:-.2em;margin-right:2px;} .df-top-theme .df-hero-status { position:absolute;left:max(var(--df-gutter),calc((100% - 1200px)/2));bottom:10px;z-index:7; font:12px/1.6 var(--df-reading);margin:0;color:#fff;background:#182127;padding:5px 10px; max-width:calc(100% - 150px); } .df-top-theme .df-hero-status:empty {display:none;} /* Native dialog: same existing TOP video, not an invented showreel. */ .df-film-dialog { box-sizing:border-box;width:min(1100px,calc(100vw - 40px));max-width:1100px; max-height:calc(100dvh - 40px);margin:auto;padding:22px;background:#141c21;color:#fff; border:1px solid #485459;overflow:auto;font:14px/1.8 sans-serif; } .df-film-dialog::backdrop {background:rgba(5,10,14,.88);} .df-film-dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;} .df-film-dialog-title {font-size:16px;font-weight:400;letter-spacing:.08em;margin:0;} .df-film-close {width:44px;height:44px;flex-shrink:0;border:1px solid #7b858a;background:transparent;color:#fff;font-size:23px;cursor:pointer;} .df-film-dialog video {display:block;width:100%;height:auto;max-height:65dvh;background:#090d10;} .df-film-note {font:13px/1.9 sans-serif;color:#d5dcdf;margin:14px 0 0;} .df-film-dialog button:focus-visible {outline:2px solid #fff;outline-offset:4px;} /* Vision uses the existing text; the English heading now has a clear role. */ .df-top-theme #main_content .post_content .df-vision {padding-top:64px;padding-bottom:64px;} .df-top-theme .df-vision-copy strong {max-width:100%;} .df-top-theme .df-vision-copy p:last-child {margin-bottom:0!important;} .df-top-theme .df-vision-copy p:empty,.df-top-theme .df-values-copy p:empty {display:none!important;} /* Values: deliberate photo/copy columns, no absolute photo behind text. */ .df-top-theme .df-values-section::before, .df-top-theme .df-values-section::after {content:none!important;} .df-top-theme .df-values-section .values-text-wrap { display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center; } .df-top-theme .df-values-copy {max-width:none;min-width:0;} .df-top-theme .df-values-copy p {font-size:17px!important;line-height:2.1!important;margin-bottom:28px!important;} .df-top-theme .df-values-copy p:last-of-type {margin-bottom:0!important;} .df-top-theme .df-values-photo-editorial {margin:0!important;padding:0!important;width:100%;min-width:0;} .df-top-theme .df-values-photo-editorial img { display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:59% center; filter:grayscale(.45) saturate(.65) brightness(.86);opacity:.92; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 96%,transparent); } /* Services: preserve the two primary + three secondary cards and all copy. */ .df-top-theme .df-service-card:before { background:linear-gradient(0deg,rgba(8,15,20,.96),rgba(8,15,20,.68) 60%,rgba(8,15,20,.1) 100%),linear-gradient(90deg,rgba(8,15,20,.15),transparent 80%); } .df-top-theme .df-service-description {font-size:15px!important;line-height:1.95!important;} .df-top-theme .df-service-secondary p {font-size:14px!important;line-height:1.85!important;} .df-top-theme .df-service-secondary a {display:inline-flex;align-items:center;min-height:44px;} .df-top-theme .df-service-number small {font-size:12px;} .df-top-theme .df-work-original {font-size:13px;min-height:32px;line-height:2.3;} .df-top-theme .df-work h4 {font-size:18px!important;} .df-top-theme .df-founder figcaption {font-size:12px;line-height:1.9;} /* Contact: center the heading AND the form, not only the combined grid. */ .df-top-theme #main_content .post_content .df-contact-section { display:flex;flex-direction:column;align-items:center;gap:40px; padding-inline:var(--df-gutter); } .df-top-theme .df-contact-section #contact { width:100%;max-width:800px!important;margin:0 auto!important;text-align:center; } .df-top-theme .df-contact-section #contact>span {justify-content:center;} .df-top-theme .df-contact-section #contact>span:after {content:none;} .df-top-theme .df-contact-section #contact::after {content:none!important;display:none;} .df-top-theme .df-contact-section #contact h2 {text-align:center;text-wrap:balance;} .df-top-theme .df-contact-statement .df-phrase {display:inline-block;} .df-top-theme .df-contact-section .home-contact-form { box-sizing:border-box;width:100%;max-width:800px!important;align-self:center;margin:0 auto!important; padding:44px 48px!important;border:1px solid #cbd1d2;background:rgba(249,249,247,.82); } .df-top-theme .df-contact-section .home-contact-form .wp-block-group__inner-container {width:100%;max-width:none!important;} .df-top-theme .df-contact-section .wpcf7-form>p {font-size:15px!important;line-height:1.85!important;position:relative;} .df-top-theme .df-contact-section .wpcf7-form label>br {display:none;} .df-top-theme .df-contact-section .wpcf7-form-control-wrap {margin-top:10px;} .df-top-theme .df-contact-section input[type="text"], .df-top-theme .df-contact-section input[type="email"], .df-top-theme .df-contact-section input[type="tel"], .df-top-theme .df-contact-section textarea {background:#fafbf9;border-color:#a8b2b6;min-height:52px;text-align:left;} .df-top-theme .df-contact-section input[type="submit"] {min-height:56px;font-size:15px!important;} .df-top-theme .df-contact-section .wpcf7-spinner {position:absolute;right:16px;bottom:16px;margin:0;} .df-top-theme .df-contact-section .wpcf7-response-output {margin:22px 0 0!important;line-height:1.85;} .df-top-theme .df-contact-section .wpcf7-not-valid-tip {color:#a02626;font:14px/1.7 var(--df-reading);margin-top:7px;} .df-top-theme .df-contact-section .wpcf7-not-valid {border-color:#a02626!important;} .df-top-theme .df-contact-section .wpcf7-response-output[aria-hidden="true"]:empty {display:none;} .df-top-theme [id="values"],.df-top-theme [id="services"],.df-top-theme [id="works"], .df-top-theme [id="aboutus"],.df-top-theme [id="contact"] {scroll-margin-top:calc(var(--swl-headerH,104px) + 24px);} .df-top-theme a,.df-top-theme button {-webkit-tap-highlight-color:rgba(86,110,124,.2);} @media(max-width:1023px){ .df-top-theme {--df-label:20px;} .df-top-theme .df-values-section .values-text-wrap {gap:32px;} .df-top-theme .df-values-copy br {display:none;} .df-top-theme .df-values-copy p {font-size:16px!important;line-height:2.05!important;} .df-top-theme .df-hero-content {max-width:700px;} .df-top-theme .df-hero-copy {font-size:clamp(28px,3.2vw,38px)!important;} .df-top-theme .df-hero-support {font-size:13px;line-height:1.85;} .df-top-theme .df-hero-play {margin-top:16px;} .df-top-theme .df-service-secondary .df-service-card {padding:22px 18px;} } @media(max-width:767px){ .df-top-theme {--df-label:16px;} .df-top-theme .df-section-heading>span {gap:16px;letter-spacing:.12em!important;} .df-top-theme .df-section-heading h2 {margin-top:14px!important;} .df-top-theme #main_content .post_content .df-vision {padding:44px 20px;} .df-top-theme .df-hero-content {left:24px;right:24px;max-height:calc(100% - 38px);} .df-top-theme .df-hero-content .df-hero-copy {font-size:clamp(19px,6vw,26px)!important;line-height:1.65!important;letter-spacing:.015em!important;} .df-top-theme .df-hero-support {font-size:12px;line-height:1.9;letter-spacing:.025em;margin-top:16px;max-width:28em;} .df-top-theme .df-hero-support span {display:inline;} .df-top-theme .df-hero-play {gap:12px;margin-top:18px;} .df-top-theme .df-hero-play-icon {width:44px;height:44px;flex-basis:44px;} .df-top-theme .df-hero-play-label {font-size:11px;} .df-top-theme .df-hero-pause {right:20px;bottom:12px;padding:6px 10px;font-size:11px;} .df-top-theme .df-hero-status {left:20px;bottom:10px;max-width:calc(100% - 140px);font-size:11px;} .df-top-theme .df-values-band {gap:10px 16px;padding:16px 20px;} .df-top-theme .df-values-band strong {font-size:14px;} .df-top-theme .df-band-label {font-size:11px;} .df-top-theme .df-band-link {font-size:12px;} .df-top-theme .df-values-section .values-text-wrap {grid-template-columns:1fr;gap:28px;} .df-top-theme .df-values-copy p {font-size:15px!important;line-height:2.05!important;} .df-top-theme .df-values-photo-editorial img {aspect-ratio:16/10;opacity:.92;} .df-top-theme .df-service-description {font-size:14px!important;} .df-top-theme .df-service-secondary p {font-size:14px!important;} .df-top-theme .df-service-number small {font-size:11px;} .df-top-theme .df-work h4 {font-size:17px!important;} .df-top-theme .df-contact-section .df-contact-statement .df-phrase {display:block;} .df-top-theme #main_content .post_content .df-contact-section {gap:30px;} .df-top-theme .df-contact-section .home-contact-form {padding:28px 22px!important;} .df-top-theme .df-contact-section .wpcf7-form>p {font-size:14px!important;} .df-top-theme .df-contact-section textarea {height:184px;} .df-film-dialog {width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:16px;} .df-film-dialog-title {font-size:14px;} } @media(max-width:360px){ .df-top-theme .df-values-band{gap:9px 12px;} .df-top-theme .df-values-band strong{font-size:13px;letter-spacing:.025em;} .df-top-theme .df-contact-section .home-contact-form{padding:24px 16px!important;} } @media(max-width:767px) and (max-height:660px){ .df-top-theme .df-hero-content {top:46%;max-height:calc(100% - 52px);} .df-top-theme .df-hero-content .df-hero-copy {font-size:19px!important;line-height:1.5!important;} .df-top-theme .df-hero-support {margin-top:10px;font-size:11px;line-height:1.7;} .df-top-theme .df-hero-play {margin-top:10px;} } @media(prefers-reduced-motion:reduce){ .df-top-theme .df-hero-content{opacity:1!important;transform:translateY(-50%)!important;transition:none!important;} .df-top-theme .df-hero-content .df-hero-copy{transform:none!important;} .df-top-theme .df-hero-play-icon{transition:none!important;} } /* Self-review pass 2: true label hierarchy, aligned secondary-card rows, inherited SWELL mobile text sizes, and a readable wide-screen intro grid. */ @media(min-width:1024px){ .df-top-theme #main_content .post_content .df-vision { display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px; padding-inline:max(var(--df-gutter),calc((var(--df-viewport,100vw) - 1200px)/2)); } .df-top-theme .df-vision-copy,.df-top-theme h2.df-vision-label {width:100%;margin:0!important;} .df-top-theme .df-vision-copy p strong {font-size:clamp(27px,2.2vw,32px);} } .df-top-theme .df-hero-support {font:400 14px/1.95 var(--df-reading)!important;} .df-top-theme .df-hero-pause {font:400 12px/1.5 var(--df-reading)!important;} .df-top-theme .df-service-secondary .df-service-card {justify-content:flex-start;} .df-top-theme .df-service-secondary .df-service-number {margin-bottom:18px;} .df-top-theme .df-service-secondary h3 {min-height:3.3em;margin:0 0 12px!important;} .df-top-theme .df-service-secondary p {margin:0 0 12px!important;} .df-top-theme .df-service-secondary a {margin-top:auto;} .df-top-theme .df-service-secondary .df-service-card:before {background:linear-gradient(180deg,rgba(8,15,20,.56),rgba(8,15,20,.60) 45%,rgba(8,15,20,.94));} @media(min-width:768px) and (max-width:1200px){ .df-top-theme .df-service-grid .df-service-card h3 {min-height:3.3em;} } @media(max-width:1023px){ .df-top-theme #main_visual:after {background:linear-gradient(90deg,rgba(6,13,18,.63),rgba(6,13,18,.58));} .df-top-theme .df-hero-support {font:400 13px/1.85 var(--df-reading)!important;} } @media(max-width:767px){ .df-top-theme .df-hero-support {font:400 12px/1.9 var(--df-reading)!important;} .df-top-theme .df-hero-pause {font:400 11px/1.5 var(--df-reading)!important;} .df-top-theme .df-service-secondary .df-service-card {padding:24px;} } @media(max-width:767px) and (max-height:660px){ .df-top-theme .df-hero-support {font:400 11px/1.7 var(--df-reading)!important;} } /* Self-review pass 3: text-only 200% enlargement, no unbreakable service label. */ .df-top-theme .df-values-band strong {white-space:normal;overflow-wrap:anywhere;} .df-top-theme .df-corporate-title .df-phrase {white-space:normal!important;overflow-wrap:anywhere;} .df-top-theme .df-contact-section label {white-space:normal!important;overflow-wrap:anywhere;word-break:normal;} .df-top-theme .df-service-card h3 {max-width:100%;} .df-top-theme .df-hero-content:has(.df-hero-pending) {opacity:0!important;} .df-top-theme .df-hero-content:has(.df-hero-ready) {opacity:1!important;transition:opacity 2.4s ease!important;} .df-top-theme .df-hero-content .df-hero-copy {opacity:1!important;transition:none!important;} @media(max-width:767px){ .df-top-theme .df-values-band{grid-template-columns:auto minmax(0,1fr);} } @media(max-width:767px) and (max-height:660px){ .df-top-theme .df-hero-content{top:50%;max-height:calc(100% - 16px);} } /* Do not hang Japanese closing brackets outside a form label at text zoom. */ .df-top-theme .df-contact-section label {hanging-punctuation:none;line-break:strict;} .df-top-theme .df-field-name,.df-top-theme .df-field-required {display:inline-block;max-width:100%;vertical-align:baseline;} .df-top-theme .df-field-required {white-space:nowrap;} /* Explicit photo / shade / copy layers also remain stable during scroll reveals. */ .df-top-theme .df-service-card {z-index:0;} .df-top-theme .df-service-card>img {z-index:0;} .df-top-theme .df-service-card:before {z-index:1;} .df-top-theme .df-service-card>:not(img) {position:relative;z-index:2;} /* DF TOP v9.3 — approved finishing changes, 2026-10-19. Video/Works dimensions, form fields, URLs, company facts are unchanged. */ /* Lower the whole headline + supporting-copy group; preserve desktop typography. Its bottom aligns near the former play control, not below the video frame. */ .df-top-theme .df-hero-content { top:auto!important; bottom:17%; transform:none!important; max-height:calc(100% - 32px); overflow-y:auto; } /* Safety for a previously rendered v9.2 DOM; v9.3 JS does not create these. */ .df-top-theme .df-hero-play,.df-top-theme .df-hero-pause,.df-top-theme .df-hero-status, .df-film-dialog {display:none!important;} /* Same visual and hit-area vocabulary on all five service cards. Existing wording and destinations (including 04 -> #works) are preserved. */ .df-top-theme .df-service-secondary .df-outline-link { display:inline-flex; align-items:center; justify-content:space-between; align-self:flex-start; width:fit-content; max-width:100%; box-sizing:border-box; gap:18px; min-height:44px; padding:10px 16px; border:1px solid #ffffff9c; background:transparent; font:400 12px/1.5 var(--df-reading);color:inherit;text-decoration:none; } .df-top-theme .df-service-secondary .df-outline-link:hover {background:rgba(255,255,255,.12);} /* The additional inline wrappers must not change desktop text layout. */ .df-top-theme .df-sp-typeset .df-sp-unit {display:contents;} .df-top-theme .df-caption-company,.df-top-theme .df-caption-role {display:inline;} @media(max-width:767px){ .df-top-theme .df-hero-content { bottom:26%;left:24px;right:24px;max-height:calc(100% - 32px); } .df-top-theme .df-hero-content .df-hero-copy { font-size:clamp(17.5px,5.4vw,23.4px)!important; line-height:1.65!important;letter-spacing:.015em!important; } .df-top-theme .df-hero-support { font:400 11.5px/1.9 var(--df-reading)!important; margin-top:14px;max-width:none;letter-spacing:.015em; } .df-top-theme .df-sp-typeset { word-break:normal;overflow-wrap:normal;line-break:strict; text-wrap:wrap;hanging-punctuation:none; } .df-top-theme .df-sp-typeset .df-sp-unit { display:inline-block; max-width:100%; vertical-align:baseline; white-space:normal;word-break:normal;overflow-wrap:anywhere; } .df-top-theme .df-sp-typeset .df-phrase {white-space:normal!important;} .df-top-theme .df-vision-copy p:not(:has(strong)) br {display:none;} /* Caption: company on the first line; role + exact legal name on the second. */ .df-top-theme .df-founder figcaption {font-size:12px;line-height:1.9;} .df-top-theme .df-caption-company,.df-top-theme .df-caption-role { display:block;max-width:100%;word-break:normal;overflow-wrap:normal; } .df-top-theme .df-caption-gap {display:none;} /* Company representative and social icons have independent lines on mobile. */ .df-top-theme .df-company-panel .df-representative-row { display:flex!important;flex-direction:column!important;align-items:flex-start!important; flex-wrap:nowrap!important;gap:8px!important;width:100%; } .df-top-theme .df-company-panel .df-representative-row>p {margin:0!important;} .df-top-theme .df-company-panel .df-representative-row>p:empty {display:none;} .df-top-theme .df-company-panel .df-representative-row>.wp-block-social-links { margin:0!important;width:auto!important;gap:12px!important;flex-wrap:nowrap!important; } } @media(max-width:360px){ .df-top-theme .df-hero-support {font-size:11px!important;} } @media(max-width:767px) and (max-height:660px){ .df-top-theme .df-hero-content {bottom:10%;max-height:calc(100% - 24px);} .df-top-theme .df-hero-content .df-hero-copy {font-size:18px!important;line-height:1.55!important;} .df-top-theme .df-hero-support {font:400 11px/1.7 var(--df-reading)!important;margin-top:10px;} } @media(prefers-reduced-motion:reduce){ .df-top-theme .df-hero-content {transform:none!important;transition:none!important;} } /* At enlarged text sizes, keep caption/name chunks intact while allowing more lines. */ .df-top-theme .df-caption-unit {display:contents;} @media(max-width:767px){ .df-top-theme .df-caption-unit {display:inline-block;max-width:100%;vertical-align:baseline;word-break:normal;overflow-wrap:anywhere;} } /* Restrained, once-only section entrances; no layout shift. */ .df-top-theme .df-soft-reveal {opacity:0!important;transform:translateY(14px)!important;transition:opacity 1.5s ease,transform 1.5s ease!important;} .df-top-theme .df-soft-reveal.df-soft-visible {opacity:1!important;transform:none!important;} @media(prefers-reduced-motion:reduce){.df-top-theme .df-soft-reveal {transform:none!important;transition:opacity 1.5s ease!important;}} @media (hover:hover) and (pointer:fine){ .df-phase1,.df-phase1 :where(header,main,footer,nav,section,article,div,p,span,h1,h2,h3,h4,figure,img,video){cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%22-5%20-3%2076%2080%22%3E%3Cpath%20d%3D%22M6%2C22%20L6%2C21%20L6%2C20%20L7%2C20%20L8%2C20%20L8%2C19%20L8%2C18%20L8%2C17%20L8%2C16%20L7%2C16%20L7%2C15%20L7%2C14%20L8%2C14%20L8%2C13%20L8%2C12%20L8%2C11%20L9%2C11%20L9%2C10%20L9%2C9%20L10%2C9%20L10%2C8%20L11%2C8%20L11%2C7%20L12%2C7%20L13%2C7%20L13%2C6%20L14%2C6%20L15%2C6%20L16%2C6%20L17%2C6%20L18%2C6%20L19%2C6%20L19%2C7%20L20%2C7%20L21%2C7%20L21%2C8%20L22%2C8%20L22%2C9%20L23%2C9%20L23%2C10%20L24%2C10%20L24%2C11%20L24%2C12%20L25%2C12%20L25%2C13%20L25%2C14%20L25%2C15%20L25%2C16%20L25%2C17%20L25%2C18%20L24%2C18%20L24%2C19%20L25%2C19%20L26%2C19%20L27%2C19%20L28%2C19%20L28%2C18%20L28%2C17%20L27%2C17%20L27%2C16%20L27%2C15%20L27%2C14%20L27%2C13%20L28%2C13%20L28%2C12%20L28%2C11%20L28%2C10%20L29%2C10%20L29%2C9%20L30%2C9%20L30%2C8%20L31%2C8%20L31%2C7%20L32%2C7%20L33%2C7%20L33%2C6%20L34%2C6%20L35%2C6%20L36%2C6%20L37%2C6%20L38%2C6%20L39%2C6%20L39%2C7%20L40%2C7%20L41%2C7%20L41%2C8%20L42%2C8%20L42%2C9%20L43%2C9%20L43%2C10%20L44%2C10%20L44%2C11%20L44%2C12%20L45%2C12%20L45%2C13%20L45%2C14%20L45%2C15%20L45%2C16%20L45%2C17%20L45%2C18%20L44%2C18%20L44%2C19%20L44%2C20%20L45%2C20%20L45%2C21%20L46%2C21%20L46%2C22%20L46%2C23%20L46%2C24%20L46%2C25%20L46%2C26%20L46%2C27%20L47%2C27%20L47%2C26%20L48%2C26%20L48%2C25%20L49%2C25%20L49%2C24%20L50%2C24%20L50%2C23%20L51%2C23%20L51%2C22%20L52%2C22%20L52%2C21%20L53%2C21%20L53%2C20%20L54%2C20%20L55%2C20%20L56%2C20%20L57%2C20%20L58%2C20%20L58%2C21%20L59%2C21%20L59%2C22%20L59%2C23%20L59%2C24%20L59%2C25%20L59%2C26%20L59%2C27%20L59%2C28%20L59%2C29%20L59%2C30%20L59%2C31%20L59%2C32%20L59%2C33%20L59%2C34%20L59%2C35%20L59%2C36%20L59%2C37%20L59%2C38%20L59%2C39%20L59%2C40%20L59%2C41%20L59%2C42%20L59%2C43%20L59%2C44%20L59%2C45%20L59%2C46%20L58%2C46%20L58%2C47%20L57%2C47%20L56%2C47%20L55%2C47%20L54%2C47%20L53%2C47%20L53%2C46%20L52%2C46%20L52%2C45%20L51%2C45%20L51%2C44%20L50%2C44%20L50%2C43%20L49%2C43%20L49%2C42%20L49%2C41%20L48%2C41%20L48%2C40%20L47%2C40%20L47%2C39%20L46%2C39%20L46%2C40%20L46%2C41%20L46%2C42%20L46%2C43%20L46%2C44%20L46%2C45%20L46%2C46%20L45%2C46%20L45%2C47%20L44%2C47%20L44%2C48%20L43%2C48%20L42%2C48%20L41%2C48%20L40%2C48%20L39%2C48%20L38%2C48%20L37%2C48%20L36%2C48%20L35%2C48%20L34%2C48%20L33%2C48%20L33%2C49%20L34%2C49%20L34%2C50%20L34%2C51%20L35%2C51%20L35%2C52%20L35%2C53%20L36%2C53%20L36%2C54%20L36%2C55%20L37%2C55%20L37%2C56%20L37%2C57%20L38%2C57%20L38%2C58%20L38%2C59%20L39%2C59%20L39%2C60%20L39%2C61%20L39%2C62%20L39%2C63%20L38%2C63%20L38%2C64%20L37%2C64%20L37%2C65%20L36%2C65%20L36%2C64%20L35%2C64%20L34%2C64%20L34%2C63%20L33%2C63%20L33%2C62%20L33%2C61%20L32%2C61%20L32%2C60%20L32%2C59%20L31%2C59%20L31%2C58%20L31%2C57%20L31%2C56%20L30%2C56%20L30%2C55%20L30%2C54%20L29%2C54%20L29%2C53%20L29%2C52%20L28%2C52%20L28%2C51%20L28%2C50%20L27%2C50%20L27%2C49%20L27%2C48%20L26%2C48%20L25%2C48%20L25%2C49%20L24%2C49%20L24%2C50%20L24%2C51%20L23%2C51%20L23%2C52%20L23%2C53%20L22%2C53%20L22%2C54%20L22%2C55%20L21%2C55%20L21%2C56%20L21%2C57%20L21%2C58%20L20%2C58%20L20%2C59%20L20%2C60%20L19%2C60%20L19%2C61%20L19%2C62%20L18%2C62%20L18%2C63%20L18%2C64%20L17%2C64%20L16%2C64%20L16%2C65%20L15%2C65%20L14%2C65%20L14%2C64%20L13%2C64%20L13%2C63%20L12%2C63%20L12%2C62%20L12%2C61%20L12%2C60%20L13%2C60%20L13%2C59%20L13%2C58%20L14%2C58%20L14%2C57%20L14%2C56%20L15%2C56%20L15%2C55%20L15%2C54%20L15%2C53%20L16%2C53%20L16%2C52%20L16%2C51%20L17%2C51%20L17%2C50%20L17%2C49%20L18%2C49%20L18%2C48%20L17%2C48%20L16%2C48%20L15%2C48%20L14%2C48%20L13%2C48%20L12%2C48%20L11%2C48%20L10%2C48%20L9%2C48%20L8%2C48%20L8%2C47%20L7%2C47%20L6%2C47%20L6%2C46%20L6%2C45%20L5%2C45%20L5%2C44%20L5%2C43%20L5%2C42%20L5%2C41%20L5%2C40%20L5%2C39%20L5%2C38%20L5%2C37%20L5%2C36%20L5%2C35%20L5%2C34%20L5%2C33%20L5%2C32%20L5%2C31%20L5%2C30%20L4%2C30%20L4%2C29%20L4%2C28%20L4%2C27%20L4%2C26%20L5%2C26%20L5%2C25%20L5%2C24%20L5%2C23%20L5%2C22%20Z%22%20fill%3D%22white%22%20stroke%3D%22%23172026%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%2242%22%20r%3D%223%22%20fill%3D%22%23e4515b%22%2F%3E%3C%2Fsvg%3E") 5 5,auto;} .df-phase1 :is(a,button,summary,[role="button"]),.df-phase1 :is(a,button,summary,[role="button"]) *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%22-5%20-3%2076%2080%22%3E%3Cpath%20d%3D%22M6%2C22%20L6%2C21%20L6%2C20%20L7%2C20%20L8%2C20%20L8%2C19%20L8%2C18%20L8%2C17%20L8%2C16%20L7%2C16%20L7%2C15%20L7%2C14%20L8%2C14%20L8%2C13%20L8%2C12%20L8%2C11%20L9%2C11%20L9%2C10%20L9%2C9%20L10%2C9%20L10%2C8%20L11%2C8%20L11%2C7%20L12%2C7%20L13%2C7%20L13%2C6%20L14%2C6%20L15%2C6%20L16%2C6%20L17%2C6%20L18%2C6%20L19%2C6%20L19%2C7%20L20%2C7%20L21%2C7%20L21%2C8%20L22%2C8%20L22%2C9%20L23%2C9%20L23%2C10%20L24%2C10%20L24%2C11%20L24%2C12%20L25%2C12%20L25%2C13%20L25%2C14%20L25%2C15%20L25%2C16%20L25%2C17%20L25%2C18%20L24%2C18%20L24%2C19%20L25%2C19%20L26%2C19%20L27%2C19%20L28%2C19%20L28%2C18%20L28%2C17%20L27%2C17%20L27%2C16%20L27%2C15%20L27%2C14%20L27%2C13%20L28%2C13%20L28%2C12%20L28%2C11%20L28%2C10%20L29%2C10%20L29%2C9%20L30%2C9%20L30%2C8%20L31%2C8%20L31%2C7%20L32%2C7%20L33%2C7%20L33%2C6%20L34%2C6%20L35%2C6%20L36%2C6%20L37%2C6%20L38%2C6%20L39%2C6%20L39%2C7%20L40%2C7%20L41%2C7%20L41%2C8%20L42%2C8%20L42%2C9%20L43%2C9%20L43%2C10%20L44%2C10%20L44%2C11%20L44%2C12%20L45%2C12%20L45%2C13%20L45%2C14%20L45%2C15%20L45%2C16%20L45%2C17%20L45%2C18%20L44%2C18%20L44%2C19%20L44%2C20%20L45%2C20%20L45%2C21%20L46%2C21%20L46%2C22%20L46%2C23%20L46%2C24%20L46%2C25%20L46%2C26%20L46%2C27%20L47%2C27%20L47%2C26%20L48%2C26%20L48%2C25%20L49%2C25%20L49%2C24%20L50%2C24%20L50%2C23%20L51%2C23%20L51%2C22%20L52%2C22%20L52%2C21%20L53%2C21%20L53%2C20%20L54%2C20%20L55%2C20%20L56%2C20%20L57%2C20%20L58%2C20%20L58%2C21%20L59%2C21%20L59%2C22%20L59%2C23%20L59%2C24%20L59%2C25%20L59%2C26%20L59%2C27%20L59%2C28%20L59%2C29%20L59%2C30%20L59%2C31%20L59%2C32%20L59%2C33%20L59%2C34%20L59%2C35%20L59%2C36%20L59%2C37%20L59%2C38%20L59%2C39%20L59%2C40%20L59%2C41%20L59%2C42%20L59%2C43%20L59%2C44%20L59%2C45%20L59%2C46%20L58%2C46%20L58%2C47%20L57%2C47%20L56%2C47%20L55%2C47%20L54%2C47%20L53%2C47%20L53%2C46%20L52%2C46%20L52%2C45%20L51%2C45%20L51%2C44%20L50%2C44%20L50%2C43%20L49%2C43%20L49%2C42%20L49%2C41%20L48%2C41%20L48%2C40%20L47%2C40%20L47%2C39%20L46%2C39%20L46%2C40%20L46%2C41%20L46%2C42%20L46%2C43%20L46%2C44%20L46%2C45%20L46%2C46%20L45%2C46%20L45%2C47%20L44%2C47%20L44%2C48%20L43%2C48%20L42%2C48%20L41%2C48%20L40%2C48%20L39%2C48%20L38%2C48%20L37%2C48%20L36%2C48%20L35%2C48%20L34%2C48%20L33%2C48%20L33%2C49%20L34%2C49%20L34%2C50%20L34%2C51%20L35%2C51%20L35%2C52%20L35%2C53%20L36%2C53%20L36%2C54%20L36%2C55%20L37%2C55%20L37%2C56%20L37%2C57%20L38%2C57%20L38%2C58%20L38%2C59%20L39%2C59%20L39%2C60%20L39%2C61%20L39%2C62%20L39%2C63%20L38%2C63%20L38%2C64%20L37%2C64%20L37%2C65%20L36%2C65%20L36%2C64%20L35%2C64%20L34%2C64%20L34%2C63%20L33%2C63%20L33%2C62%20L33%2C61%20L32%2C61%20L32%2C60%20L32%2C59%20L31%2C59%20L31%2C58%20L31%2C57%20L31%2C56%20L30%2C56%20L30%2C55%20L30%2C54%20L29%2C54%20L29%2C53%20L29%2C52%20L28%2C52%20L28%2C51%20L28%2C50%20L27%2C50%20L27%2C49%20L27%2C48%20L26%2C48%20L25%2C48%20L25%2C49%20L24%2C49%20L24%2C50%20L24%2C51%20L23%2C51%20L23%2C52%20L23%2C53%20L22%2C53%20L22%2C54%20L22%2C55%20L21%2C55%20L21%2C56%20L21%2C57%20L21%2C58%20L20%2C58%20L20%2C59%20L20%2C60%20L19%2C60%20L19%2C61%20L19%2C62%20L18%2C62%20L18%2C63%20L18%2C64%20L17%2C64%20L16%2C64%20L16%2C65%20L15%2C65%20L14%2C65%20L14%2C64%20L13%2C64%20L13%2C63%20L12%2C63%20L12%2C62%20L12%2C61%20L12%2C60%20L13%2C60%20L13%2C59%20L13%2C58%20L14%2C58%20L14%2C57%20L14%2C56%20L15%2C56%20L15%2C55%20L15%2C54%20L15%2C53%20L16%2C53%20L16%2C52%20L16%2C51%20L17%2C51%20L17%2C50%20L17%2C49%20L18%2C49%20L18%2C48%20L17%2C48%20L16%2C48%20L15%2C48%20L14%2C48%20L13%2C48%20L12%2C48%20L11%2C48%20L10%2C48%20L9%2C48%20L8%2C48%20L8%2C47%20L7%2C47%20L6%2C47%20L6%2C46%20L6%2C45%20L5%2C45%20L5%2C44%20L5%2C43%20L5%2C42%20L5%2C41%20L5%2C40%20L5%2C39%20L5%2C38%20L5%2C37%20L5%2C36%20L5%2C35%20L5%2C34%20L5%2C33%20L5%2C32%20L5%2C31%20L5%2C30%20L4%2C30%20L4%2C29%20L4%2C28%20L4%2C27%20L4%2C26%20L5%2C26%20L5%2C25%20L5%2C24%20L5%2C23%20L5%2C22%20Z%22%20fill%3D%22white%22%20stroke%3D%22%23172026%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%2242%22%20r%3D%223%22%20fill%3D%22%23e4515b%22%2F%3E%3C%2Fsvg%3E") 5 5,pointer;} .df-phase1 :is(input,textarea,[contenteditable="true"]){cursor:text;} } /* Mobile typography: override legacy global 9vw headings only at phone widths. */ @media(max-width:767px){ .df-inner #main_content.dfi :is(.dfi-title,.dfi-heading){font-size:clamp(24px,6.8vw,28px)!important;line-height:1.65!important;letter-spacing:.025em!important;word-break:normal!important;overflow-wrap:normal!important;text-wrap:wrap!important;} .df-inner #main_content.dfi .dfi-tagline{font-size:clamp(19px,5.2vw,21px)!important;line-height:1.8!important;text-wrap:wrap!important;} .df-inner #main_content.dfi .dfi-card :is(h2,h3){font-size:21px!important;line-height:1.7!important;} .df-inner #main_content.dfi .df-work :is(h3,h4){font-size:17px!important;line-height:1.8!important;} :is(.df-top-theme,.df-inner) #main_content .df-mobile-typeset{word-break:normal!important;line-break:strict!important;overflow-wrap:break-word!important;text-wrap:pretty;} :is(.df-top-theme,.df-inner) #main_content .df-mobile-unit{display:inline-block;max-width:100%;vertical-align:baseline;text-indent:0;word-break:normal;overflow-wrap:break-word;} :is(.df-top-theme,.df-inner) #main_content :is(h1,h2,h3,h4).df-mobile-typeset{text-wrap:wrap!important;} .df-inner #main_content.dfi :is(.dfi-lead,.dfi-prose p,.dfi-card p,.dfi-faq p){text-align:left!important;letter-spacing:.015em!important;line-height:1.95!important;} } @media(max-width:360px){.df-inner #main_content.dfi :is(.dfi-title,.dfi-heading){font-size:22px!important;}} /* Vision statement shares the approved primary-heading scale. */ .df-top-theme .df-vision-copy p strong.df-vision-statement{font-family:var(--df-display)!important;font-size:var(--df-title)!important;font-weight:400!important;line-height:1.55!important;letter-spacing:.05em!important;text-wrap:wrap;} @media(max-width:767px){.df-top-theme .df-vision-copy p strong.df-vision-statement{letter-spacing:.04em!important;}.df-top-theme .df-vision-statement .df-phrase{display:inline-block!important;max-width:100%;vertical-align:baseline;}} /* Our Vision: match the other main headings on mobile only. */ @media(max-width:767px){ .df-top-theme #main_content .df-vision-copy>p:first-child{font-family:var(--df-display)!important;font-size:var(--df-title)!important;font-weight:400!important;line-height:1.55!important;letter-spacing:.04em!important;text-wrap:wrap!important;} .df-top-theme #main_content .df-vision-copy>p:first-child .df-mobile-unit{white-space:nowrap;} } /* Base content remains readable; motion classes are applied only by JavaScript. */ .df-top-theme .values-text-wrap{opacity:1!important;transform:none!important;} /* Individual Works: titles are text, not category flex rows. Mobile only. */ @media(max-width:767px){ .df-inner #main_content.dfi-dark .df-work :is(h3,h4){display:block!important;gap:0!important;margin:16px 0 5px!important;padding:0!important;font-size:17px!important;line-height:1.7!important;letter-spacing:.025em!important;word-break:normal;line-break:strict;overflow-wrap:break-word;text-wrap:pretty;} .df-inner #main_content.dfi-dark .df-work :is(h3,h4)::after{content:none!important;display:none!important;} .df-inner #main_content.dfi-dark .df-work p{margin:0!important;line-height:1.75!important;letter-spacing:.025em;} .df-inner #main_content.dfi-dark .df-work-category>.df-mobile-typeset .df-mobile-unit,.df-inner #main_content.dfi-dark .df-work .df-mobile-unit{display:inline!important;} } @media(max-width:767px){.df-inner #main_content.dfi-dark .df-work-title-unit{display:inline-block;max-width:100%;white-space:normal;}} /* DF APPROVED THREE EFFECTS 20261023 */ /* Approved cursor declarations are deliberately untouched. Review candidate only. */ @media (hover:hover) and (pointer:fine) { .df-phase1 :is(a[href],button:not(:disabled),summary,input[type="submit"]:not(:disabled)) {transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease,text-decoration-color .22s ease;} .df-phase1 #header a .ttl {display:inline-block;transition:transform .22s ease,text-decoration-color .22s ease;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:6px;} .df-phase1 #header a:not([aria-current="page"]):hover .ttl {transform:scale(1.025);text-decoration-color:currentColor;} .df-phase1 a[href]:not(:has(img,svg,i)):not(.dfi-button,.df-outline-link,.df-values-band):not(#header a):hover {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;} .df-phase1 :is(a.dfi-button,a.df-outline-link):hover {background-color:rgba(127,127,127,.14);box-shadow:inset 0 0 0 1px currentColor;text-decoration:none;color:inherit;} .df-phase1 .df-values-band:hover .df-band-link {text-decoration:underline;text-underline-offset:.3em;} .df-phase1 :is(.df-video,.dfi-short-cover):not(:has(iframe)) > img {transition:filter .22s ease;} .df-phase1 :is(.df-video,.dfi-short-cover):not(:has(iframe)):hover > img {filter:brightness(1.035);} .df-phase1 :is(.df-video,.dfi-short-cover):not(:has(iframe))::after {transition:transform .22s ease,background-color .22s ease;} .df-phase1 :is(.df-video,.dfi-short-cover):not(:has(iframe)):hover::after {transform:translate(-50%,-50%) scale(1.03);background-color:rgba(0,0,0,.5);} .df-phase1 :is(.c-headLogo__link,.c-iconList__link,.dfi-social,.wp-block-social-link a):hover {filter:brightness(1.16);opacity:.86;} .df-phase1 :is(input[type="submit"],button[type="submit"]):not(:disabled):hover {filter:brightness(1.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);} .df-phase1 summary:hover {background-color:rgba(127,127,127,.08);text-decoration:underline;text-underline-offset:.3em;} } .df-phase1 :is(a[href],button,summary,input[type="submit"]):focus-visible {outline:2px solid currentColor;outline-offset:4px;} @media (prefers-reduced-motion:reduce) { .df-phase1 :is(a[href],button,summary,input[type="submit"],a .ttl,.df-video>img,.dfi-short-cover>img), .df-phase1 :is(.df-video,.dfi-short-cover)::after {transition:none!important;} .df-phase1 #header a:not([aria-current="page"]):hover .ttl {transform:none;} .df-phase1 :is(.df-video,.dfi-short-cover):hover::after {transform:translate(-50%,-50%);} } /* Finder is inserted inside existing playback buttons, never over an active iframe. */ .df-brand-finder{position:absolute;inset:12px;z-index:2;pointer-events:none!important;opacity:0;color:rgba(255,255,255,.85);filter:drop-shadow(0 1px 1px #0008);transition:opacity .22s ease;} .df-brand-finder i{position:absolute;width:18px;height:18px;border-style:solid;border-color:currentColor;border-width:0;} .df-brand-finder i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px;} .df-brand-finder i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px;} .df-brand-finder i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px;} .df-brand-finder i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px;} @media(hover:hover) and (pointer:fine){.df-phase1 :is(.df-video,.dfi-short-cover):not(:has(iframe)):hover>.df-brand-finder{opacity:1;}} .df-phase1 :is(.df-video,.dfi-short-cover):not(:has(iframe)):focus-visible>.df-brand-finder{opacity:1;} .df-phase1 :is(.df-video,.dfi-short-cover):has(iframe)>.df-brand-finder{display:none;} @media(prefers-reduced-motion:reduce){.df-brand-finder{transition:none;}} /* CF7 uses the official success state; no client-side success guessing. */ .df-phase1 .wpcf7 form.sent .wpcf7-response-output{white-space:pre-line;line-height:1.9;} .df-phase1 .wpcf7 form.sent .wpcf7-response-output .df-brand-success-line{display:block;margin-block-start:.85em;font-family:var(--df-display,var(--dfi-display,serif));font-size:1.1em;line-height:1.8;letter-spacing:.035em;font-weight:500;} .df-phase1 .wpcf7 form:not(.sent) .df-brand-success-line{display:none;}